From 7caf664e4831739dcc4358c7bac8fea44235184a Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 9 Jul 2019 17:02:05 +0800
Subject: [PATCH] [improvement] Slider: support number type of bar-height prop
 (#3794)

---
 src/slider/README.md                             |  2 +-
 src/slider/README.zh-CN.md                       |  2 +-
 src/slider/index.js                              |  8 ++++----
 src/slider/test/__snapshots__/index.spec.js.snap | 10 ++++++++++
 src/slider/test/index.spec.js                    | 11 +++++++++++
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/slider/README.md b/src/slider/README.md
index a5d96d66a60..d0d398ebd51 100644
--- a/src/slider/README.md
+++ b/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` |
diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md
index ea011de3216..1ec3e736ef1 100644
--- a/src/slider/README.zh-CN.md
+++ b/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 |
diff --git a/src/slider/index.js b/src/slider/index.js
index dd3cd1af410..9eeab2a4713 100644
--- a/src/slider/index.js
+++ b/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
     };
 
diff --git a/src/slider/test/__snapshots__/index.spec.js.snap b/src/slider/test/__snapshots__/index.spec.js.snap
index 9b57b909bc5..dfba9726e3d 100644
--- a/src/slider/test/__snapshots__/index.spec.js.snap
+++ b/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;">
diff --git a/src/slider/test/index.spec.js b/src/slider/test/index.spec.js
index 7e34177b5a3..0e9e57e5a0f 100644
--- a/src/slider/test/index.spec.js
+++ b/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();
+});