@upday/upcircles

ProgressLoop 环形进度条

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

使用方法

安装@upday/upcircles

npm i @upday/upcircles

在文件中引入@upday/upcircles

import upCircles from '@upday/upcircles';

基础用法

 <up-circles
            :number="3"
            :percents="percents"
            :radiuses="radiuses"
            :strokeColors="strokeColors"
            :trailWidth="6"
          >
            <!-- <div name=""></div> -->
            {{text}}
          </up-circles>
<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

关于作者

微信：qq805599

相关命令

npm publish --access public

 npm unpublish  xxxx  --force