Vue JS的Radial Progressbar组件

Vue JS的Radial Progressbar组件
插件名称 vue-radial-progress
发布时间 2020年6月21日
插件作者 wyzantinc

Vue JS组件,可为您的Web应用程序生成动画的径向(圆形)SVG进度条。

变更日志:

v0.3.2(06/18/2020)

  • 更新版本的次要安全修复程序

特征:

  • 自定义步骤。
  • 自定义颜色。
  • 可配置的动画。

安装和下载:

npm install vue-radial-progress

使用:

<template>
  <radial-progress-bar :diameter="200"
                       :completed-steps="completedSteps"
                       :total-steps="totalSteps">
   <p>全部步骤: {{ totalSteps }}</p>
   <p>完成步骤: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>

<script>
import RadialProgressBar from 'vue-radial-progress'

export default {
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10
    }
  },

  components: {
    RadialProgressBar
  }
}
</script>

Props

名称默认值描述
diameter200进度条圆的直径(以像素为单位)。
totalSteps10完成进度条的步骤总数。
completedSteps0进度栏中已完成的步骤数。
startColor#bbff42进度条渐变前沿的颜色。
stopColor#429321进度条渐变的辅助颜色。
innerStrokeColor#323232进度条的背景色。
strokeWidth10进度条的宽度。
innerStrokeWidth10背景/内圆的宽度。
strokeLinecapround圆的描边线帽的类型。
animateSpeed1000动画一个步骤的时间(以毫秒为单位)。
fps60动画应运行的每秒帧数。
timingFunclinear用于CSS过渡的过渡计时功能。请参阅过渡计时功能
isClockwisetrue控制进度条的方向。