diff --git a/src/slider/README.md b/src/slider/README.md index 22e2baf8b..4eaeb0b3a 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -105,7 +105,8 @@ export default { | Event | Description | Arguments | |------|------|------| -| change | Triggered after value change | value: current rate | +| input | Instant triggered when value changed | value: current rate | +| change | Triggered after value changed | value: current rate | | drag-start | Triggered when start drag | - | | drag-end | Triggered when end drag | - | diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index abd1fb285..b2062c378 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -107,7 +107,8 @@ Slider 垂直展示时,高度为 100% 父元素高度 | 事件名 | 说明 | 回调参数 | |------|------|------| -| change | 进度值改变后触发 | value: 当前进度 | +| input | 进度变化时实时触发 | value: 当前进度 | +| change | 进度变化且结束拖动后触发 | value: 当前进度 | | drag-start | 开始拖动时触发 | - | | drag-end | 结束拖动时触发 | - | diff --git a/src/slider/index.js b/src/slider/index.js index 3ca4bdb43..b59aba387 100644 --- a/src/slider/index.js +++ b/src/slider/index.js @@ -96,14 +96,18 @@ export default createComponent({ const total = this.vertical ? rect.height : rect.width; const value = (delta / total) * this.range + this.min; + this.startValue = this.value; this.updateValue(value, true); }, updateValue(value, end) { value = this.format(value); - this.$emit('input', value); - if (end) { + if (value !== this.value) { + this.$emit('input', value); + } + + if (end && value !== this.startValue) { this.$emit('change', value); } }, diff --git a/src/slider/test/index.spec.js b/src/slider/test/index.spec.js index 0e9e57e5a..472abf459 100644 --- a/src/slider/test/index.spec.js +++ b/src/slider/test/index.spec.js @@ -116,3 +116,21 @@ it('bar height', () => { expect(wrapper).toMatchSnapshot(); }); + +it('should not emit change event when value not changed', () => { + const wrapper = mount(Slider, { + propsData: { + value: 50 + }, + listeners: { + input(value) { + wrapper.setProps({ value }); + } + } + }); + + trigger(wrapper, 'click', 100, 0); + trigger(wrapper, 'click', 100, 0); + + expect(wrapper.emitted('change').length).toEqual(1); +});