mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
parent
1802cd4d8d
commit
9e7c8d33eb
@ -55,17 +55,17 @@ const value = ref<number[]>([10, 30])
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
| v-model | 滑块值,如果为array,则为双向滑块 | number / array | - | - | - |
|
||||
| hide-min-max | 是否显示左右的最大最小值 | boolean | - | false | - |
|
||||
| hide-label | 是否显示当前滑块值 | boolean | - | false | - |
|
||||
| disabled | 是否禁用 | boolean | - | false | - |
|
||||
| max | 最大值 | number | - | 100 | - |
|
||||
| min | 最小值 | number | - | 0 | - |
|
||||
| step | 步进值 | number | - | 1 | - |
|
||||
| active-color | 进度条激活背景颜色 | string | - | linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%) | - |
|
||||
| inactive-color | 进度条未激活背景颜色 | string | - | #e5e5e5 | - |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|---------------------------|-----|-------|-------|--------|
|
||||
| v-model | 滑块值,如果为array,则为双向滑块 | number / array | - | - | - |
|
||||
| hide-min-max | 是否显示左右的最大最小值 | boolean | - | false | - |
|
||||
| hide-label | 是否显示当前滑块值 | boolean | - | false | - |
|
||||
| disabled | 是否禁用 | boolean | - | false | - |
|
||||
| max | 最大值 | number | - | 100 | - |
|
||||
| min | 最小值,允许负数`($LOWEST_VERSION$)` | number | - | 0 | - |
|
||||
| step | 步进值 | number | - | 1 | - |
|
||||
| active-color | 进度条激活背景颜色 | string | - | linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%) | - |
|
||||
| inactive-color | 进度条未激活背景颜色 | string | - | #e5e5e5 | - |
|
||||
|
||||
## Events
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2023-10-10 17:02:32
|
||||
* @LastEditTime: 2023-10-10 18:08:19
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\pages\slider\Index.vue
|
||||
* 记得注释
|
||||
-->
|
||||
@ -13,7 +13,7 @@
|
||||
<wd-slider v-model="value1" />
|
||||
</demo-block>
|
||||
<demo-block title="指定选择范围">
|
||||
<wd-slider v-model="value2" :min="4" :max="1000" />
|
||||
<wd-slider v-model="value2" :min="-10" :max="10" />
|
||||
</demo-block>
|
||||
<demo-block title="指定步长">
|
||||
<wd-slider v-model="value4" hide-min-max :step="10" />
|
||||
|
||||
@ -95,10 +95,7 @@ const stepValue = ref<number>(1) // 步长
|
||||
watch(
|
||||
() => props.max,
|
||||
(newValue) => {
|
||||
if (newValue < 0) {
|
||||
maxValue.value = 100
|
||||
console.warn('[wot design] warning(wd-slider): max value must be greater than 0')
|
||||
} else if (newValue <= props.min) {
|
||||
if (newValue <= props.min) {
|
||||
maxValue.value = props.min // 交换最大值和最小值
|
||||
minValue.value = newValue
|
||||
console.warn('[wot design] warning(wd-slider): max value must be greater than min value')
|
||||
@ -106,16 +103,13 @@ watch(
|
||||
maxValue.value = newValue // 更新最大值
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.min,
|
||||
(newValue) => {
|
||||
if (newValue < 0) {
|
||||
minValue.value = 0
|
||||
console.warn('[wot design] warning(wd-slider): min value must be greater than 0')
|
||||
} else if (newValue >= props.max) {
|
||||
if (newValue >= props.max) {
|
||||
minValue.value = props.max // 交换最小值和最大值
|
||||
maxValue.value = newValue
|
||||
console.warn('[wot design] warning(wd-slider): min value must be less than max value')
|
||||
@ -123,7 +117,7 @@ watch(
|
||||
minValue.value = newValue // 更新最小值
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
@ -134,7 +128,7 @@ watch(
|
||||
console.warn('[wot design] warning(wd-slider): step must be greater than 0')
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user