mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 01:28:30 +08:00
docs: ✏️ 增加 Circle 组件使用插槽的示例
This commit is contained in:
parent
1abf962e37
commit
6341594295
@ -72,7 +72,6 @@ const gradientColor = {
|
||||
| `v-model` \|`modelValue` | 当前进度 | number | - | `0` | 0.1.19 |
|
||||
| `customClass` | 自定义class | string | - | - | 0.1.19 |
|
||||
| `customStyle` | 自定义style | string | - | - | 0.1.19 |
|
||||
| `rate` | 目标进度 | number \| string | - | `100` | 0.1.19 |
|
||||
| `size` | 圆环直径,默认单位为 px | number | - | `100` | 0.1.19 |
|
||||
| `color` | 进度条颜色 | string \| Record<string, string> | - | `#4d80f0` | 0.1.19 |
|
||||
| `layerColor` | 轨道颜色 | string | - | `#EBEEF5` | 0.1.19 |
|
||||
|
||||
@ -12,6 +12,12 @@
|
||||
<wd-circle custom-class="custom-circle" v-model="current" :size="120" text="大小定制" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="使用slot">
|
||||
<wd-circle custom-class="custom-circle" v-model="current" :stroke-width="6">
|
||||
<view style="color: red">{{ current }}%</view>
|
||||
</wd-circle>
|
||||
</demo-block>
|
||||
|
||||
<demo-block>
|
||||
<wd-button custom-style="margin-right:24rpx" type="primary" size="small" @click="doAdd">增加</wd-button>
|
||||
<wd-button type="error" size="small" @click="doDecre">减少</wd-button>
|
||||
|
||||
@ -51,8 +51,6 @@ interface Props {
|
||||
customClass?: string
|
||||
// 自定义style
|
||||
customStyle?: string
|
||||
// 目标进度
|
||||
rate?: number | string
|
||||
// 圆环直径,默认单位为 px
|
||||
size?: number
|
||||
// 进度条颜色,传入对象格式可以定义渐变色
|
||||
@ -80,16 +78,12 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
customClass: '',
|
||||
// 自定义style
|
||||
customStyle: '',
|
||||
// 目标进度
|
||||
rate: 100,
|
||||
// 圆环直径,默认单位为 px
|
||||
size: 100,
|
||||
// 进度条颜色,传入对象格式可以定义渐变色
|
||||
color: '#4d80f0',
|
||||
// 轨道颜色
|
||||
layerColor: '#EBEEF5',
|
||||
// 填充颜色
|
||||
fill: '#ffffff',
|
||||
// 动画速度(单位为 rate/s)
|
||||
speed: 50,
|
||||
// 进度条宽度 默认单位px
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user