feat(Slider): add more css variables (#4305)

* feat(Slider): add more css variables

* fix(Slider): remove barHeight default value

packages/common/style/var.less

@@ -455,6 +455,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%;

packages/slider/README.md

@@ -85,16 +85,16 @@ Page({
 
 ### Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| value | 当前进度百分比，取值范围为 0-100 | _number_ | `0` | - |
-| disabled | 是否禁用滑块 | _boolean_ | `false` | - |
-| max | 最大值 | _number_ | `100` | - |
-| min | 最小值 | _number_ | `0` | - |
-| step | 步长 | _number_ | `1` | - |
-| bar-height | 进度条高度，默认单位为 `px` | _string \| number_ | `2px` | - |
-| active-color | 进度条激活态颜色 | _string_ | `#1989fa` | - |
-| inactive-color | 进度条默认颜色 | _string_ | `#e5e5e5` | - |
+| 参数           | 说明                             | 类型               | 默认值    | 版本 |
+| -------------- | -------------------------------- | ------------------ | --------- | ---- |
+| value          | 当前进度百分比，取值范围为 0-100 | _number_           | `0`       | -    |
+| disabled       | 是否禁用滑块                     | _boolean_          | `false`   | -    |
+| max            | 最大值                           | _number_           | `100`     | -    |
+| min            | 最小值                           | _number_           | `0`       | -    |
+| step           | 步长                             | _number_           | `1`       | -    |
+| bar-height     | 进度条高度，默认单位为 `px`      | _string \| number_ | `2px`     | -    |
+| active-color   | 进度条激活态颜色                 | _string_           | `#1989fa` | -    |
+| inactive-color | 进度条默认颜色                   | _string_           | `#e5e5e5` | -    |
 
 ### Events
 

packages/slider/index.less

@@ -3,6 +3,7 @@
 
 .van-slider {
   position: relative;
+  .theme(height, '@slider-bar-height');
   .theme(border-radius, '@border-radius-max');
   .theme(background-color, '@slider-inactive-background-color');
 
@@ -18,16 +19,19 @@
 
   &__bar {
     position: relative;
-    border-radius: inherit;
-    .theme(transition, 'width @animation-duration-fast');
+    width: 100%;
+    height: 100%;
     .theme(background-color, '@slider-active-background-color');
+
+    border-radius: inherit;
+    .theme(transition, 'all @animation-duration-fast');
   }
 
   &__button {
-    width: @slider-button-width;
-    height: @slider-button-height;
-    border-radius: @slider-button-border-radius;
-    box-shadow: @slider-button-box-shadow;
+    .theme(width, '@slider-button-width');
+    .theme(height, '@slider-button-height');
+    .theme(border-radius, '@slider-button-border-radius');
+    .theme(box-shadow, '@slider-button-box-shadow');
     .theme(background-color, '@slider-button-background-color');
 
     &-wrapper {
@@ -39,6 +43,6 @@
   }
 
   &--disabled {
-    opacity: @slider-disabled-opacity;
+    .theme(opacity, '@slider-disabled-opacity');
   }
 }

packages/slider/index.ts

@@ -32,10 +32,7 @@ VantComponent({
         }
       },
     },
-    barHeight: {
-      type: null,
-      value: 2,
-    },
+    barHeight: null,
   },
 
   created() {

packages/slider/index.wxml

@@ -1,17 +1,17 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="computed" />
+<wxs src="../wxs/style.wxs" module="style" />
 
 <view
   class="custom-class {{ utils.bem('slider', { disabled }) }}"
-  style="{{ inactiveColor ? 'background:' + inactiveColor : '' }}"
+  style="{{ style({ background: inactiveColor, height: utils.addUnit(barHeight) }) }}"
   bind:tap="onClick"
 >
   <view
-    class="van-slider__bar"
-    style="{{ barStyle }};{{ computed.barStyle(barHeight, activeColor) }}"
+    class="{{ utils.bem('slider__bar') }}"
+    style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
   >
     <view
-      class="van-slider__button-wrapper"
+      class="{{ utils.bem('slider__button-wrapper') }}"
       bind:touchstart="onTouchStart"
       catch:touchmove="onTouchMove"
       bind:touchend="onTouchEnd"
@@ -23,7 +23,7 @@
       />
       <view
         wx:else
-        class="van-slider__button"
+        class="{{ utils.bem('slider__button') }}"
       />
     </view>
   </view>