ProgressLoop 环形进度条

以环形方式展示进度完成情况

使用方法

安装@upday/updaycircles

npm i @upday/updaycircles

在文件中引入@upday/updaycircles

import updaycircles from '@upday/updaycircles';

基础用法

 <updaycircle
            :number="3"
            :percents="percents"
            :radiuses="radiuses"
            :strokeColors="strokeColors"
            :trailWidth="6"
          >
            <!-- <div name=""></div> -->
            {{text}}
          </updaycircle>
<script>
export default {
    data(){
        return{
            text:'文字'
        }
    },
    methods:{
    },
     computed: {
    percents: () => {
      return [2, 30, 12]
    },
    radiuses: () => {
      return [55, 45, 35]
    },
    strokeColors: () => {
      return ['#337DFF', '#FED963', '#FEAA63']
    }
  }
}
</script>

Prop

| 字段 | 说明 | 类型 | 默认值 | | ------------- | ----------------------------------------------- | ------ | --------------------------------- | | number | 几个进度换，目前只支持2和3 | Number | 2 | | percents | 进度条位置百分比（0-100） | Array | [10, 10, 12] | | strokeWidths | 高亮的进度线宽度（单位px） | Array | ["#337DFF", "#FED963", "#FEAA63"] | | strokeLinecap | 环形路径两端的形状（可选值：butt/round/square） | String | round | | radiuses | 圆形的半径（单位px） | Array | [70, 45, 25] | | trailWidth | 进度环背景的线宽，单位 px | Number | 6 | | trailColor | 环形线的底色 | String | | | duration | 进度动画持续时长 | Number | 0 |

相关命令

npm publish --access public

 npm unpublish  xxxx  --force