DataV - Vue3

Appearance

进度池 ​

进度池

基础用法 ​

查看代码
vue
<template>
  <div w800px h200px flex="~ col" justify-center items-center bg-dark>
    <div>
      <dv-percent-pond :config="config" style="width:200px;height:100px;" />
    </div>
    <div pt5>
      <button btn @click="updateData">
        更新数据
      </button>
    </div>
  </div>
</template>
<script lang="ts" setup>
const config = reactive({
  value: 66,
})

const updateData = () => {
  config.value = Math.floor(Math.random() * (100 - 1)) + 1
}
</script>

调节边框 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  </div>
</template>
<script lang="ts" setup>
const config = reactive({
  value: 66,
  borderWidth: 5,
  borderRadius: 10,
  borderGap: 5,
})
</script>

线条间隙 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  </div>
</template>
<script lang="ts" setup>
const config = reactive({
  value: 66,
  lineDash: [10, 2],
})
</script>

局部渐变 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  </div>
</template>
<script lang="ts" setup>
const config = reactive({
  value: 66,
  localGradient: true,
})
</script>

定制块隙长度 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-percent-pond :config="config" style="width:200px;height:50px;" />
  </div>
</template>
<script lang="ts" setup>
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], [])

const config = reactive({
  value: 100,
  colors: ['#01c4f9', '#c135ff'],
  lineDash,
})
</script>
<style scoped>
:deep(.dv-percent-pond text){
  display: none;
}
</style>

百分比标签已通过CSSdisplay:none隐藏。

config属性 ​

参数说明类型可选值默认值
value进度池数值Number0-1000
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]

注释 ​

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

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

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