VUE Ring-Progress ---- 圆环进度条 组件

VUE Ring-Progress ---- 圆环进度条 组件vue

usage:
一、在main.js内
 
  import RingProgress from './components/Ring-Progress.vue'
  
  Vue.component(RingProgress.name, RingProgress)
  
二、
  <Ring-Progress :widthRem="4"
                    :fontSize0Rem="0.48"
                    :fontSize1Rem="0.32"
                    :radius="4"
                    :progressData = "{progressNum: 88.88, canvasId: 'top1'}" />
  
  props: {
    widthRem:  // canvas宽度
    fontSize0Rem: // 圆环内字体大小
    fontSize1Rem: // 圆环内字体大小
    radius: // 圆环弧度
    progressData: {
      progressNum: '当前进度',
      canvasId: '' // canvasID
    }
  }  
注:HTML根元素未设置font-size时,默认为37.5pxgit

 

点我,GitHub地址~~~~~github

相关文章
相关标签/搜索