From a5819c286e06469bc41e8aa9e0ed44cc21625dad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 27 Jan 2020 12:21:37 +0800
Subject: [PATCH] feat(Slider): add @slider-bar-height less var

---
 src/slider/index.js                              |  6 +-----
 src/slider/index.less                            |  2 ++
 src/slider/test/__snapshots__/demo.spec.js.snap  | 12 ++++++------
 src/slider/test/__snapshots__/index.spec.js.snap | 14 +++++++-------
 src/style/var.less                               |  1 +
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/slider/index.js b/src/slider/index.js
index 0968b9428..6affa0e30 100644
--- a/src/slider/index.js
+++ b/src/slider/index.js
@@ -10,6 +10,7 @@ export default createComponent({
   props: {
     disabled: Boolean,
     vertical: Boolean,
+    barHeight: [Number, String],
     buttonSize: [Number, String],
     activeColor: String,
     inactiveColor: String,
@@ -29,10 +30,6 @@ export default createComponent({
       type: Number,
       default: 0,
     },
-    barHeight: {
-      type: [Number, String],
-      default: 2,
-    },
   },
 
   data() {
@@ -49,7 +46,6 @@ export default createComponent({
     buttonStyle() {
       if (this.buttonSize) {
         const size = addUnit(this.buttonSize);
-
         return {
           width: size,
           height: size,
diff --git a/src/slider/index.less b/src/slider/index.less
index c25f973a4..17c4c0ea0 100644
--- a/src/slider/index.less
+++ b/src/slider/index.less
@@ -18,6 +18,7 @@
 
   &__bar {
     position: relative;
+    height: @slider-bar-height;
     background-color: @slider-active-background-color;
     border-radius: inherit;
     transition: width @animation-duration-fast;
@@ -50,6 +51,7 @@
 
   &--vertical {
     display: inline-block;
+    width: @slider-bar-height;
     height: 100%;
 
     .van-slider__button-wrapper {
diff --git a/src/slider/test/__snapshots__/demo.spec.js.snap b/src/slider/test/__snapshots__/demo.spec.js.snap
index 69e825f9f..cd3c5207c 100644
--- a/src/slider/test/__snapshots__/demo.spec.js.snap
+++ b/src/slider/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; height: 2px;">
+      <div class="van-slider__bar" style="width: 50%;">
         <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>
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; height: 2px;">
+      <div class="van-slider__bar" style="width: 50%;">
         <div role="slider" tabindex="0" aria-valuemin="-50" aria-valuenow="0" aria-valuemax="50" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider van-slider--disabled">
-      <div class="van-slider__bar" style="width: 50%; height: 2px;">
+      <div class="van-slider__bar" style="width: 50%;">
         <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; height: 2px;">
+      <div class="van-slider__bar" style="width: 50%;">
         <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>
@@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(238, 10, 36);">
+      <div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
         <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="custom-button">50</div>
         </div>
@@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div style="height: 120px; padding-left: 30px;">
       <div class="van-slider van-slider--vertical">
-        <div class="van-slider__bar" style="height: 50%; width: 2px;">
+        <div class="van-slider__bar" style="height: 50%;">
           <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
             <div class="van-slider__button"></div>
           </div>
diff --git a/src/slider/test/__snapshots__/index.spec.js.snap b/src/slider/test/__snapshots__/index.spec.js.snap
index 5d71f37b0..cf80160ac 100644
--- a/src/slider/test/__snapshots__/index.spec.js.snap
+++ b/src/slider/test/__snapshots__/index.spec.js.snap
@@ -12,7 +12,7 @@ exports[`bar-height prop 1`] = `
 
 exports[`button-size prop 1`] = `
 <div class="van-slider">
-  <div class="van-slider__bar" style="width: 50%; height: 2px;">
+  <div class="van-slider__bar" style="width: 50%;">
     <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" style="width: 10px; height: 10px;"></div>
     </div>
@@ -22,7 +22,7 @@ exports[`button-size prop 1`] = `
 
 exports[`click bar 1`] = `
 <div class="van-slider van-slider--disabled">
-  <div class="van-slider__bar" style="width: 50%; height: 2px;">
+  <div class="van-slider__bar" style="width: 50%;">
     <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
@@ -32,7 +32,7 @@ exports[`click bar 1`] = `
 
 exports[`click bar 2`] = `
 <div class="van-slider">
-  <div class="van-slider__bar" style="width: 100%; height: 2px;">
+  <div class="van-slider__bar" style="width: 100%;">
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
@@ -42,7 +42,7 @@ exports[`click bar 2`] = `
 
 exports[`click vertical 1`] = `
 <div class="van-slider van-slider--vertical">
-  <div class="van-slider__bar" style="height: 100%; width: 2px;">
+  <div class="van-slider__bar" style="height: 100%;">
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
@@ -52,7 +52,7 @@ exports[`click vertical 1`] = `
 
 exports[`drag button 1`] = `
 <div class="van-slider van-slider--disabled">
-  <div class="van-slider__bar" style="width: 50%; height: 2px;">
+  <div class="van-slider__bar" style="width: 50%;">
     <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
@@ -62,7 +62,7 @@ exports[`drag button 1`] = `
 
 exports[`drag button 2`] = `
 <div class="van-slider">
-  <div class="van-slider__bar" style="width: 100%; height: 2px;">
+  <div class="van-slider__bar" style="width: 100%;">
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
@@ -72,7 +72,7 @@ exports[`drag button 2`] = `
 
 exports[`drag button vertical 1`] = `
 <div class="van-slider van-slider--vertical">
-  <div class="van-slider__bar" style="height: 100%; width: 2px;">
+  <div class="van-slider__bar" style="height: 100%;">
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
diff --git a/src/style/var.less b/src/style/var.less
index e8e9aa3ac..a3f1d2a00 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -590,6 +590,7 @@
 @slider-active-background-color: @blue;
 @slider-inactive-background-color: @gray-3;
 @slider-disabled-opacity: @disabled-opacity;
+@slider-bar-height: 2px;
 @slider-button-width: 24px;
 @slider-button-height: 24px;
 @slider-button-border-radius: 50%;