UNPKG

mand-mobile

Version:

A Vue.js 2.0 Mobile UI Toolkit

42 lines (31 loc) 1.06 kB
--- title: Progress 进度 preview: https://didi.github.io/mand-mobile/examples/#/progress --- 进度圆环,用于将数据直观地传达给用户 ### 引入 ```javascript import { Progress } from 'mand-mobile' Vue.component(Progress.name, Progress) ``` ### 代码演示 <!-- DEMO --> ### API #### Progress Props |属性 | 说明 | 类型 | 默认值 | 备注 | |----|-----|------|------|------| |value|进度值|Number|`0`|`0-1`| |size|圆环大小|Number|`70`|单位`px`| |width|圆环宽度|Number|-|单位`px`| |color|圆环高亮颜色|String|`#fc9153`|-| |border-color|圆环颜色|String|`rgba(0, 0, 0, .1)`|-| |fill|圆环内部填充|String|`transparent`|-| |linecap|圆环两端形状|String|`round`|`round`, `butt`| |rotate|圆环旋转|Number|`0`|-| |transition|进度变化是否使用动效|Boolean|`false`|-| |duration|进度变化动效时长|Number|`1000`|单位`ms`| #### Progress Slots ##### default 圆环内部内容插槽,一般用于添加文本 ##### defs 圆环SVG内部的插槽,一般用于添加`defs`, `use`元素等