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