admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 增加 Circle 组件使用插槽的示例

Browse Source
This commit is contained in:
xuqingkai 2024-01-11 11:55:40 +08:00
parent 1abf962e37
commit 6341594295
3 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/component/circle.md
View File

@ -72,7 +72,6 @@ const gradientColor = {
| `v-model` \|`modelValue` | 当前进度 | number | - | `0` | 0.1.19 | | `v-model` \|`modelValue` | 当前进度 | number | - | `0` | 0.1.19 |
| `customClass` | 自定义class | string | - | - | 0.1.19 | | `customClass` | 自定义class | string | - | - | 0.1.19 |
| `customStyle` | 自定义style | string | - | - | 0.1.19 | | `customStyle` | 自定义style | string | - | - | 0.1.19 |
| `rate` | 目标进度 | number \| string | - | `100` | 0.1.19 |
| `size` | 圆环直径，默认单位为 px | number | - | `100` | 0.1.19 | | `size` | 圆环直径，默认单位为 px | number | - | `100` | 0.1.19 |
| `color` | 进度条颜色 | string \| Record<string, string> | - | `#4d80f0` | 0.1.19 | | `color` | 进度条颜色 | string \| Record<string, string> | - | `#4d80f0` | 0.1.19 |
| `layerColor` | 轨道颜色 | string | - | `#EBEEF5` | 0.1.19 | | `layerColor` | 轨道颜色 | string | - | `#EBEEF5` | 0.1.19 |

6
src/pages/circle/Index.vue
View File

@ -12,6 +12,12 @@
<wd-circle custom-class="custom-circle" v-model="current" :size="120" text="大小定制" /> <wd-circle custom-class="custom-circle" v-model="current" :size="120" text="大小定制" />
</demo-block> </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> <demo-block>
<wd-button custom-style="margin-right:24rpx" type="primary" size="small" @click="doAdd">增加</wd-button> <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> <wd-button type="error" size="small" @click="doDecre">减少</wd-button>

6
src/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue
View File

@ -51,8 +51,6 @@ interface Props {
customClass?: string customClass?: string
// 自定义style // 自定义style
customStyle?: string customStyle?: string
// 目标进度
rate?: number | string
// 圆环直径，默认单位为 px // 圆环直径，默认单位为 px
size?: number size?: number
// 进度条颜色，传入对象格式可以定义渐变色 // 进度条颜色，传入对象格式可以定义渐变色
@ -80,16 +78,12 @@ const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
// 自定义style // 自定义style
customStyle: '', customStyle: '',
// 目标进度
rate: 100,
// 圆环直径，默认单位为 px // 圆环直径，默认单位为 px
size: 100, size: 100,
// 进度条颜色，传入对象格式可以定义渐变色 // 进度条颜色，传入对象格式可以定义渐变色
color: '#4d80f0', color: '#4d80f0',
// 轨道颜色 // 轨道颜色
layerColor: '#EBEEF5', layerColor: '#EBEEF5',
// 填充颜色
fill: '#ffffff',
// 动画速度（单位为 rate/s） // 动画速度（单位为 rate/s）
speed: 50, speed: 50,
// 进度条宽度 默认单位px // 进度条宽度 默认单位px