diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index a4f837b98..6fd40fd4c 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -20,6 +20,10 @@ - 支持`reset`方法传入`code`参数 +##### Button + +- 新增`icon`属性 + ##### ImagePreview - 新增`close-on-popstate`属性 @@ -30,6 +34,11 @@ - 新增`right-icon`属性 - 新增`right-icon`插槽 +##### Slider + +- 新增`drag-start`事件 +- 新增`drag-end`事件 + ### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.1) diff --git a/packages/slider/en-US.md b/packages/slider/en-US.md index 28c63eff8..5d4aba47b 100644 --- a/packages/slider/en-US.md +++ b/packages/slider/en-US.md @@ -105,6 +105,8 @@ export default { | Event | Description | Arguments | |------|------|------| | change | Triggered after value change | value: current rate | +| drag-start | Triggered when start drag | - | +| drag-end | Triggered when end drag | - | ### Slots diff --git a/packages/slider/index.js b/packages/slider/index.js index d24aa34c7..72938f160 100644 --- a/packages/slider/index.js +++ b/packages/slider/index.js @@ -1,4 +1,4 @@ -import { use } from '../utils'; +import { use, isDef } from '../utils'; import { TouchMixin } from '../mixins/touch'; import { preventDefault } from '../utils/event'; @@ -30,17 +30,26 @@ export default sfc({ methods: { onTouchStart(event) { - if (this.disabled) return; + if (this.disabled) { + return; + } this.touchStart(event); this.startValue = this.format(this.value); + this.dragStatus = 'start'; }, onTouchMove(event) { + if (this.disabled) { + return; + } + + if (this.dragStatus === 'start') { + this.dragStatus = 'draging'; + this.$emit('drag-start'); + } + preventDefault(event, true); - - if (this.disabled) return; - this.touchMove(event); const rect = this.$el.getBoundingClientRect(); @@ -53,8 +62,18 @@ export default sfc({ }, onTouchEnd() { - if (this.disabled) return; - this.updateValue(this.newValue, true); + if (this.disabled) { + return; + } + + if (isDef(this.newValue)) { + this.updateValue(this.newValue, true); + } + + if (this.dragStatus === 'draging') { + this.$emit('drag-end'); + this.dragStatus = ''; + } }, onClick(event) { diff --git a/packages/slider/test/index.spec.js b/packages/slider/test/index.spec.js index 85642d7ea..0a6a8d9f3 100644 --- a/packages/slider/test/index.spec.js +++ b/packages/slider/test/index.spec.js @@ -1,5 +1,5 @@ import Slider from '..'; -import { mount, triggerDrag, trigger } from '../../../test/utils'; +import { mount, trigger, triggerDrag } from '../../../test/utils'; function mockGetBoundingClientRect(vertical) { Element.prototype.getBoundingClientRect = jest.fn(() => ({ @@ -24,13 +24,20 @@ test('drag button', () => { wrapper.setProps({ value }); }); + const button = wrapper.find('.van-slider__button'); triggerDrag(button, 50, 0); expect(wrapper).toMatchSnapshot(); + expect(wrapper.emitted('drag-start')).toBeFalsy(); + expect(wrapper.emitted('drag-end')).toBeFalsy(); wrapper.setData({ disabled: false }); + trigger(button, 'touchstart', 0, 0); + trigger(button, 'touchend', 0, 0); triggerDrag(button, 50, 0); expect(wrapper).toMatchSnapshot(); + expect(wrapper.emitted('drag-start')).toBeTruthy(); + expect(wrapper.emitted('drag-end')).toBeTruthy(); }); it('click bar', () => { diff --git a/packages/slider/zh-CN.md b/packages/slider/zh-CN.md index 43e7aab57..b4ecdafcd 100644 --- a/packages/slider/zh-CN.md +++ b/packages/slider/zh-CN.md @@ -107,6 +107,8 @@ Slider 垂直展示时,高度为 100% 父元素高度 | 事件名 | 说明 | 回调参数 | |------|------|------| | change | 进度值改变后触发 | value: 当前进度 | +| drag-start | 开始拖动时触发 | - | +| drag-end | 结束拖动时触发 | - | ### Slots