diff --git a/src/slider/README.md b/src/slider/README.md index 1d4005581..2d9d3a1c5 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -103,6 +103,7 @@ export default { | min | Min value | *number* | `0` | | step | Step size | *number* | `1` | | bar-height | Height of bar | *string \| number* | `2px` | +| button-size `v2.4.5` | Button size | *string \| number* | `24px` | | active-color | Active color of bar | *string* | `#1989fa` | | inactive-color | Inactive color of bar | *string* | `#e5e5e5` | | disabled | Whether to disable slider | *boolean* | `false` | diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index 9b118ec31..c57b57c62 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -105,8 +105,9 @@ Slider 垂直展示时,高度为 100% 父元素高度 | min | 最小值 | *number* | `0` | | step | 步长 | *number* | `1` | | bar-height | 进度条高度,默认单位为`px` | *string \| number* | `2px` | +| button-size `v2.4.5` | 滑块按钮大小,默认单位为`px` | *string \| number* | `24px` | | active-color | 进度条激活态颜色 | *string* | `#1989fa` | -| inactive-color | 进度条默认颜色 | *string* | `#e5e5e5` | +| inactive-color | 进度条非激活态颜色 | *string* | `#e5e5e5` | | disabled | 是否禁用滑块 | *boolean* | `false` | | vertical | 是否垂直展示 | *boolean* | `false` | diff --git a/src/slider/index.js b/src/slider/index.js index 57e8e5f15..0968b9428 100644 --- a/src/slider/index.js +++ b/src/slider/index.js @@ -10,6 +10,7 @@ export default createComponent({ props: { disabled: Boolean, vertical: Boolean, + buttonSize: [Number, String], activeColor: String, inactiveColor: String, min: { @@ -44,6 +45,17 @@ export default createComponent({ range() { return this.max - this.min; }, + + buttonStyle() { + if (this.buttonSize) { + const size = addUnit(this.buttonSize); + + return { + width: size, + height: size, + }; + } + }, }, created() { @@ -173,7 +185,9 @@ export default createComponent({ aria-orientation={this.vertical ? 'vertical' : 'horizontal'} class={bem('button-wrapper')} > - {this.slots('button') ||
} + {this.slots('button') || ( +
+ )}
diff --git a/src/slider/test/__snapshots__/index.spec.js.snap b/src/slider/test/__snapshots__/index.spec.js.snap index dfba9726e..5d71f37b0 100644 --- a/src/slider/test/__snapshots__/index.spec.js.snap +++ b/src/slider/test/__snapshots__/index.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`bar height 1`] = ` +exports[`bar-height prop 1`] = `
@@ -10,6 +10,16 @@ exports[`bar height 1`] = `
`; +exports[`button-size prop 1`] = ` +
+
+
+
+
+
+
+`; + exports[`click bar 1`] = `
diff --git a/src/slider/test/index.spec.js b/src/slider/test/index.spec.js index ca5d23c2c..b81c5a7ac 100644 --- a/src/slider/test/index.spec.js +++ b/src/slider/test/index.spec.js @@ -111,7 +111,7 @@ it('click vertical', () => { restoreMock(); }); -it('bar height', () => { +it('bar-height prop', () => { const wrapper = mount(Slider, { propsData: { value: 50, @@ -122,6 +122,17 @@ it('bar height', () => { expect(wrapper).toMatchSnapshot(); }); +it('button-size prop', () => { + const wrapper = mount(Slider, { + propsData: { + value: 50, + buttonSize: 10, + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); + it('should not emit change event when value not changed', () => { const wrapper = mount(Slider, { propsData: {