blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Slider): add drag event param (#8990)

Browse Source
This commit is contained in:
neverland 2021-07-07 16:29:21 +08:00 committed by GitHub
parent d72c7ddf48
commit d6663464c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/slider/README.md
View File

@ -150,7 +150,7 @@ export default {
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| v-model | Current value | _number \| number[]_ | `0` | | v-model | Current value | _number \| [number, number]_ | `0` |
| max | Max value | _number \| string_ | `100` | | max | Max value | _number \| string_ | `100` |
| min | Min value | _number \| string_ | `0` | | min | Min value | _number \| string_ | `0` |
| step | Step size | _number \| string_ | `1` | | step | Step size | _number \| string_ | `1` |
@ -167,10 +167,10 @@ export default {
| Event | Description | Arguments | | Event | Description | Arguments |
| ------------------ | ------------------------------ | ------------------- | | ------------------ | ------------------------------ | ------------------- |
| update:model-value | Emitted when value is changing | value: current rate | | update:model-value | Emitted when value is changing | _value: number_ |
| change | Emitted after value changed | value: current rate | | change | Emitted after value changed | _value: number_ |
| drag-start | Emitted when start draging | - | | drag-start | Emitted when start draging | _event: TouchEvent_ |
| drag-end | Emitted when end draging | - | | drag-end | Emitted when end draging | _event: TouchEvent_ |
### Slots ### Slots

18
src/slider/README.zh-CN.md
View File

@ -152,12 +152,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| v-model | 当前进度百分比 | _number \| number[]_ | `0` | | v-model | 当前进度百分比，在双滑块模式下为数组格式 | _number \| [number, number]_ | `0` |
| max | 最大值 | _number \| string_ | `100` | | max | 最大值 | _number \| string_ | `100` |
| min | 最小值 | _number \| string_ | `0` | | min | 最小值 | _number \| string_ | `0` |
| step | 步长 | _number \| string_ | `1` | | step | 步长 | _number \| string_ | `1` |
| bar-height | 进度条高度，默认单位为`px` | _number \| string_ | `2px` | | bar-height | 进度条高度，默认单位为 `px` | _number \| string_ | `2px` |
| button-size | 滑块按钮大小，默认单位为`px` | _number \| string_ | `24px` | | button-size | 滑块按钮大小，默认单位为 `px` | _number \| string_ | `24px` |
| active-color | 进度条激活态颜色 | _string_ | `#1989fa` | | active-color | 进度条激活态颜色 | _string_ | `#1989fa` |
| inactive-color | 进度条非激活态颜色 | _string_ | `#e5e5e5` | | inactive-color | 进度条非激活态颜色 | _string_ | `#e5e5e5` |
| range | 是否开启双滑块模式 | _boolean_ | `false` | | range | 是否开启双滑块模式 | _boolean_ | `false` |
@ -167,12 +167,12 @@ export default {
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| ------------------ | ------------------------ | --------------- | | ------------------ | ------------------------ | ------------------- |
| update:model-value | 进度变化时实时触发 | value: 当前进度 | | update:model-value | 进度变化时实时触发 | _value: number_ |
| change | 进度变化且结束拖动后触发 | value: 当前进度 | | change | 进度变化且结束拖动后触发 | _value: number_ |
| drag-start | 开始拖动时触发 | - | | drag-start | 开始拖动时触发 | _event: TouchEvent_ |
| drag-end | 结束拖动时触发 | - | | drag-end | 结束拖动时触发 | _event: TouchEvent_ |
### Slots ### Slots

6
src/slider/Slider.tsx
View File

@ -192,7 +192,7 @@ export default defineComponent({
} }
if (dragStatus.value === 'start') { if (dragStatus.value === 'start') {
emit('drag-start'); emit('drag-start', event);
} }
preventDefault(event, true); preventDefault(event, true);
@ -213,14 +213,14 @@ export default defineComponent({
updateValue(currentValue); updateValue(currentValue);
}; };
const onTouchEnd = () => { const onTouchEnd = (event: TouchEvent) => {
if (props.disabled || props.readonly) { if (props.disabled || props.readonly) {
return; return;
} }
if (dragStatus.value === 'draging') { if (dragStatus.value === 'draging') {
updateValue(currentValue, true); updateValue(currentValue, true);
emit('drag-end'); emit('drag-end', event);
} }
dragStatus.value = ''; dragStatus.value = '';