1.0.9 • Published 4 years ago

@upday/upcircles v1.0.9

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

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和3Number2
percents进度条位置百分比(0-100)Array10, 10, 12
strokeWidths高亮的进度线宽度(单位px)Array"#337DFF", "#FED963", "#FEAA63"
strokeLinecap环形路径两端的形状(可选值:butt/round/square)Stringround
radiuses圆形的半径(单位px)Array70, 45, 25
trailWidth进度环背景的线宽,单位 pxNumber6
trailColor环形线的底色String
duration进度动画持续时长Number0

关于作者

微信:qq805599

相关命令

npm publish --access public
 npm unpublish  xxxx  --force