在实际开发中可能会遇到这样的 UI 效果图:
带动画效果的渐变色圆环进度条,可以使用vue-gradient-progress插件来实现
安装依赖
npm install vue-gradient-progress -S
也可以使用cnpmyarn等main.js引入:
import GradientProgress from 'vue-gradient-progress'
import "vue-gradient-progress/lib/gradient-progress.css"
Vue.use(GradientProgress)
使用示例
<gradient-progress id="pId" :rate="80" />
或
<gradient-progress id="pId" :rate="80">
...自定义内容
</gradient-progress>
参数
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| id | id,同一组件内多次使用,id要不同 | String | canvasId |
| showRate | 是否显示rate值 | Boolean | true |
| rate | rate | Number | 0 |
| lineWidth | 圆环边框宽度 | Number | 6 |
| canvasWidth | canvas宽度 | Number | 300 |
| canvasHeight | canvas高度 | Number | 150 |
| ballR | 小球半径 | Number | 2.5 |
| cirR | 圆环半径 | Number | 45 |
| startColor | 渐变色开始颜色(rgb) | Array | [143, 211, 235] |
| endColor | 渐变色结束颜色(rgb) | Array | [88, 176, 168] |
版权声明:本文为weixin_41838201原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。