[improvement] Slider: support number type of bar-height prop (#3794)

src/slider/README.md

@@ -95,7 +95,7 @@ export default {
 | max | Max value | `Number` | `100` |
 | min | Min value | `Number` | `0` |
 | step | Step size | `Number` | `1` |
-| bar-height | Height of bar | `String` | `2px` |
+| bar-height | Height of bar | `Number | 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` |

src/slider/README.zh-CN.md

@@ -97,7 +97,7 @@ Slider 垂直展示时，高度为 100% 父元素高度
 | max | 最大值 | `Number` | `100` | - |
 | min | 最小值 | `Number` | `0` | - |
 | step | 步长 | `Number` | `1` | - |
-| bar-height | 进度条高度 | `String` | `2px` | - |
+| bar-height | 进度条高度，默认单位为`px` | `Number | String` | `2px` | - |
 | active-color | 进度条激活态颜色 | `String` | `#1989fa` | 1.5.1 |
 | inactive-color | 进度条默认颜色 | `String` | `#e5e5e5` | 1.5.1 |
 | vertical | 是否垂直展示 | `Boolean` | `false` | 1.6.13 |

src/slider/index.js

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { preventDefault } from '../utils/dom/event';
 
@@ -29,8 +29,8 @@ export default createComponent({
       default: 0
     },
     barHeight: {
-      type: String,
-      default: '2px'
+      type: [Number, String],
+      default: 2
     }
   },
 
@@ -126,7 +126,7 @@ export default createComponent({
 
     const barStyle = {
       [mainAxis]: `${((this.value - this.min) * 100) / this.range}%`,
-      [crossAxis]: this.barHeight,
+      [crossAxis]: addUnit(this.barHeight),
       background: this.activeColor
     };
 

src/slider/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`bar height 1`] = `
+<div class="van-slider">
+  <div class="van-slider__bar" style="width: 50%; height: 10px;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`click bar 1`] = `
 <div class="van-slider van-slider--disabled">
   <div class="van-slider__bar" style="width: 50%; height: 2px;">

src/slider/test/index.spec.js

@@ -105,3 +105,14 @@ it('click vertical', () => {
 
   restoreMock();
 });
+
+it('bar height', () => {
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      barHeight: 10
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});