diff --git a/packages/slider/demo/index.vue b/packages/slider/demo/index.vue index 2dd14769a..9354bb6e8 100644 --- a/packages/slider/demo/index.vue +++ b/packages/slider/demo/index.vue @@ -53,6 +53,16 @@ + + +
+ +
+ @@ -66,7 +76,8 @@ export default { title4: '指定步长', customStyle: '自定义样式', customButton: '自定义按钮', - text: '当前值：' + text: '当前值：', + vertical: '垂直方向' }, 'en-US': { title1: 'Basic Usage', @@ -75,7 +86,8 @@ export default { title4: 'Step size', customStyle: 'Custom Style', customButton: 'Custom Button', - text: 'Current value: ' + text: 'Current value: ', + vertical: 'Vertical' } }, @@ -86,7 +98,8 @@ export default { value3: 50, value4: 50, value5: 50, - value6: 50 + value6: 50, + value7: 50 }; }, diff --git a/packages/slider/en-US.md b/packages/slider/en-US.md index f89337284..bdc71cb6f 100644 --- a/packages/slider/en-US.md +++ b/packages/slider/en-US.md @@ -74,6 +74,14 @@ export default { ``` +#### Vertical + +```html +
+ +
+``` + ### API | Attribute | Description | Type | Default | @@ -86,6 +94,7 @@ export default { | bar-height | Height of bar | `String` | `2px` | | active-color | Active color of bar | `String` | `#1989fa` | | inactive-color | Inactive color of bar | `String` | `#e5e5e5` | +| vertical | Whether to display vertical | `Boolean` | `false` | ### Event diff --git a/packages/slider/index.js b/packages/slider/index.js index 12ec5c19b..b2e83ecf3 100644 --- a/packages/slider/index.js +++ b/packages/slider/index.js @@ -10,6 +10,7 @@ export default sfc({ min: Number, value: Number, disabled: Boolean, + vertical: Boolean, activeColor: String, inactiveColor: String, max: { @@ -41,8 +42,12 @@ export default sfc({ if (this.disabled) return; this.touchMove(event); + const rect = this.$el.getBoundingClientRect(); - const diff = (this.deltaX / rect.width) * 100; + const delta = this.vertical ? this.deltaY : this.deltaX; + const total = this.vertical ? rect.height : rect.width; + const diff = (delta / total) * 100; + this.updateValue(this.startValue + diff); }, @@ -57,7 +62,10 @@ export default sfc({ if (this.disabled) return; const rect = this.$el.getBoundingClientRect(); - const value = ((event.clientX - rect.left) / rect.width) * 100; + const delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left; + const total = this.vertical ? rect.height : rect.width; + const value = (delta / total) * 100; + this.updateValue(value, true); }, @@ -71,23 +79,33 @@ export default sfc({ }, format(value) { - return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step; + return ( + Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step + ); } }, render(h) { + const { vertical } = this; const style = { background: this.inactiveColor }; + const mainAxis = vertical ? 'height' : 'width'; + const crossAxis = vertical ? 'width' : 'height'; + const barStyle = { - width: `${this.format(this.value)}%`, - height: this.barHeight, + [mainAxis]: `${this.format(this.value)}%`, + [crossAxis]: this.barHeight, background: this.activeColor }; return ( -
+
+
+
+
+
+
+
+
+
+
+
+
`; diff --git a/packages/slider/test/__snapshots__/index.spec.js.snap b/packages/slider/test/__snapshots__/index.spec.js.snap index 02d26fc8d..9b1b41e6d 100644 --- a/packages/slider/test/__snapshots__/index.spec.js.snap +++ b/packages/slider/test/__snapshots__/index.spec.js.snap @@ -20,6 +20,16 @@ exports[`click bar 2`] = `
`; +exports[`click vertical 1`] = ` +
+
+
+
+
+
+
+`; + exports[`drag button 1`] = `
@@ -39,3 +49,13 @@ exports[`drag button 2`] = `
`; + +exports[`drag button vertical 1`] = ` +
+
+
+
+
+
+
+`; diff --git a/packages/slider/test/index.spec.js b/packages/slider/test/index.spec.js index 682754841..85642d7ea 100644 --- a/packages/slider/test/index.spec.js +++ b/packages/slider/test/index.spec.js @@ -1,11 +1,19 @@ import Slider from '..'; import { mount, triggerDrag, trigger } from '../../../test/utils'; -Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100, left: 0 })); +function mockGetBoundingClientRect(vertical) { + Element.prototype.getBoundingClientRect = jest.fn(() => ({ + width: vertical ? 0 : 100, + height: vertical ? 100 : 0, + top: vertical ? 0 : 100, + left: vertical ? 100 : 0 + })); +} test('drag button', () => { + mockGetBoundingClientRect(); + const wrapper = mount(Slider, { - attachToDocument: true, propsData: { value: 50, disabled: true @@ -26,6 +34,8 @@ test('drag button', () => { }); it('click bar', () => { + mockGetBoundingClientRect(); + const wrapper = mount(Slider, { propsData: { value: 50, @@ -44,3 +54,40 @@ it('click bar', () => { trigger(wrapper, 'click', 100, 0); expect(wrapper).toMatchSnapshot(); }); + +test('drag button vertical', () => { + mockGetBoundingClientRect(true); + + const wrapper = mount(Slider, { + propsData: { + value: 50, + vertical: true + } + }); + + wrapper.vm.$on('input', value => { + wrapper.setProps({ value }); + }); + + const button = wrapper.find('.van-slider__button'); + triggerDrag(button, 0, 50); + expect(wrapper).toMatchSnapshot(); +}); + +it('click vertical', () => { + mockGetBoundingClientRect(true); + + const wrapper = mount(Slider, { + propsData: { + value: 50, + vertical: true + } + }); + + wrapper.vm.$on('input', value => { + wrapper.setProps({ value }); + }); + + trigger(wrapper, 'click', 0, 100); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/slider/zh-CN.md b/packages/slider/zh-CN.md index d430913ca..9d43b9262 100644 --- a/packages/slider/zh-CN.md +++ b/packages/slider/zh-CN.md @@ -73,6 +73,16 @@ export default { ``` +#### 垂直方向 + +Slider 垂直展示时，高度为 100% 父元素高度 + +```html +
+ +
+``` + ### API | 参数 | 说明 | 类型 | 默认值 | 版本 | @@ -85,6 +95,7 @@ export default { | bar-height | 进度条高度 | `String` | `2px` | 1.1.0 | | active-color | 进度条激活态颜色 | `String` | `#1989fa` | 1.5.1 | | inactive-color | 进度条默认颜色 | `String` | `#e5e5e5` | 1.5.1 | +| vertical | 是否垂直展示 | `Boolean` | `false` | 1.6.13 | ### Event