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

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)
 

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;
+      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