Q-Percent 进度池

参考 dataV-进度池 (opens new window)

<QPercent :config="config" :data="data" style="width:200px;height:100px;"></QPercent>

基本示例

<template>
  <div style="background: black;height: 200px" class="flex-center-cus">
    <QPercent :config="config" :data="data" style="width:200px;height:100px;"></QPercent>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          borderWidth: 5,
          borderRadius: 10,
          borderGap: 5,
          lineDash: [10, 2],
          localGradient: true
        },
        data: 66,
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

进阶示例

<template>
  <div style="background: black;height: 200px" class="flex-center-cus">
    <QPercent :config="config" :data="data" style="width:200px;height:100px;"></QPercent>
  </div>
</template>

<script>
  const fullWidth = 300
  const borderGap = 3
  const borderWidth = 3
  const usefulWidth = fullWidth - (borderGap + borderWidth) * 2

  const pieceLength = [0.25, 0.5, 0.25]
  const pieceGap = 3

  const lineDash = pieceLength
      .map(l => [usefulWidth * l, pieceGap])
      .reduce((all, current) => [...all, ...current], [])

  export default {
    data() {
      return {
        config: {
          borderWidth: 5,
          borderRadius: 10,
          borderGap: 5,
          lineDash,
          colors: ['#01c4f9', '#c135ff'],
          localGradient: true
        },
        data: 88,
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
value(对应:data)	进度池数值	Number	0-100	0
colors	进度池配色	Array<String>	[1]	[2]
borderWidth	边框宽度	Number	—	3
borderGap	边框间隙	Number	—	3
lineDash	线条间隙	Array<Number>	—	[5, 1]
textColor	文字颜色	String	[1]	#fff
borderRadius	边框半径	Number	—	5
localGradient	局部渐变	Boolean	—	false
formatter	信息格式化	String	—	'{value}%'[3]

config 注释

[1] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

[2] 默认配色为['#3DE7C9', '#00BAFF'], 自动应用渐变色，若不想使用渐变色，请配置两个相同的颜色。

[3] 自动使用value的值替换字符串中的'{value}'标记。