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

feat: ✨ Slider组件min值允许负数

Browse Source 
✅ Closes: #266
This commit is contained in:
Jasper 2024-04-28 16:43:32 +08:00 committed by 不如摸鱼去
parent 1802cd4d8d
commit 9e7c8d33eb
3 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/component/slider.md
View File

@ -55,17 +55,17 @@ const value = ref<number[]>([10, 30])
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------| |-----|---------------------------|-----|-------|-------|--------|
| v-model | 滑块值，如果为array，则为双向滑块 | number / array | - | - | - | | v-model | 滑块值，如果为array，则为双向滑块 | number / array | - | - | - |
| hide-min-max | 是否显示左右的最大最小值 | boolean | - | false | - | | hide-min-max | 是否显示左右的最大最小值 | boolean | - | false | - |
| hide-label | 是否显示当前滑块值 | boolean | - | false | - | | hide-label | 是否显示当前滑块值 | boolean | - | false | - |
| disabled | 是否禁用 | boolean | - | false | - | | disabled | 是否禁用 | boolean | - | false | - |
| max | 最大值 | number | - | 100 | - | | max | 最大值 | number | - | 100 | - |
| min | 最小值 | number | - | 0 | - | | min | 最小值，允许负数`($LOWEST_VERSION$)` | number | - | 0 | - |
| step | 步进值 | number | - | 1 | - | | step | 步进值 | number | - | 1 | - |
| active-color | 进度条激活背景颜色 | string | - | linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%) | - | | active-color | 进度条激活背景颜色 | string | - | linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%) | - |
| inactive-color | 进度条未激活背景颜色 | string | - | #e5e5e5 | - | | inactive-color | 进度条未激活背景颜色 | string | - | #e5e5e5 | - |
## Events ## Events

4
src/pages/slider/Index.vue
View File

@ -3,7 +3,7 @@
* @Date: 2023-10-10 17:02:32 * @Date: 2023-10-10 17:02:32
* @LastEditTime: 2023-10-10 18:08:19 * @LastEditTime: 2023-10-10 18:08:19
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\slider\Index.vue * @FilePath: \wot-design-uni\src\pages\slider\Index.vue
* 记得注释 * 记得注释
--> -->
@ -13,7 +13,7 @@
<wd-slider v-model="value1" /> <wd-slider v-model="value1" />
</demo-block> </demo-block>
<demo-block title="指定选择范围"> <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>
<demo-block title="指定步长"> <demo-block title="指定步长">
<wd-slider v-model="value4" hide-min-max :step="10" /> <wd-slider v-model="value4" hide-min-max :step="10" />

16
src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue
View File

@ -95,10 +95,7 @@ const stepValue = ref<number>(1) // 步长
watch( watch(
() => props.max, () => props.max,
(newValue) => { (newValue) => {
if (newValue < 0) { if (newValue <= props.min) {
maxValue.value = 100
console.warn('[wot design] warning(wd-slider): max value must be greater than 0')
} else if (newValue <= props.min) {
maxValue.value = props.min // 交换最大值和最小值 maxValue.value = props.min // 交换最大值和最小值
minValue.value = newValue minValue.value = newValue
console.warn('[wot design] warning(wd-slider): max value must be greater than min value') console.warn('[wot design] warning(wd-slider): max value must be greater than min value')
@ -106,16 +103,13 @@ watch(
maxValue.value = newValue // 更新最大值 maxValue.value = newValue // 更新最大值
} }
}, },
{ deep: true, immediate: true } { immediate: true }
) )
watch( watch(
() => props.min, () => props.min,
(newValue) => { (newValue) => {
if (newValue < 0) { if (newValue >= props.max) {
minValue.value = 0
console.warn('[wot design] warning(wd-slider): min value must be greater than 0')
} else if (newValue >= props.max) {
minValue.value = props.max // 交换最小值和最大值 minValue.value = props.max // 交换最小值和最大值
maxValue.value = newValue maxValue.value = newValue
console.warn('[wot design] warning(wd-slider): min value must be less than max value') console.warn('[wot design] warning(wd-slider): min value must be less than max value')
@ -123,7 +117,7 @@ watch(
minValue.value = newValue // 更新最小值 minValue.value = newValue // 更新最小值
} }
}, },
{ deep: true, immediate: true } { immediate: true }
) )
watch( watch(
@ -134,7 +128,7 @@ watch(
console.warn('[wot design] warning(wd-slider): step must be greater than 0') console.warn('[wot design] warning(wd-slider): step must be greater than 0')
} }
}, },
{ deep: true, immediate: true } { immediate: true }
) )
watch( watch(