1.0.0 • Published 3 years ago

vue-cylinder-progress v1.0.0

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

使用方式

import CylinderProgress from 'vue-cylinder-progress'
import 'vue-cylinder-progress/vue-cylinder-progress.css'

  <CylinderProgress
   :percent="percent"
   :cylinderHeight="100 / 6"
   :invisableDashed="true"
   containerColor="gold"
   progressColor="rgba(156, 156, 0, 0.5)"
   :width="100"
   :height="200">
   </CylinderProgress>

字段说明

字段类型版本说明
percentNumber1.0.0当前进度，0 - 1之间
cylinderHeightNumber1.0.0用于调整切斜程度，建议取width的1/5左右
invisableDashedBoolean1.0.0看不见的边框是否虚化
containerColorString1.0.0容器颜色
progressColorString1.0.0进度颜色
widthNumber1.0.0组件宽度
heightNumber1.0.0组件高度

示例图1

动图1

示例图2

动图2

示例图3

动图2

自定义组件圆柱体百分比进度条
@everything-registry/sub-chunk-3078
1.0.0

3 years ago