[new feature] Slider: add drag-start、drag-end event

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
 

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) {

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', () => {

packages/slider/zh-CN.md

@@ -107,6 +107,8 @@ Slider 垂直展示时，高度为 100% 父元素高度
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | change | 进度值改变后触发 | value: 当前进度 |
+| drag-start | 开始拖动时触发 | - |
+| drag-end | 结束拖动时触发 | - |
 
 ### Slots