[new feature] Slider: add button slot & drag event (#1148)

example/pages/slider/index.js

@@ -1,10 +1,20 @@
 import Page from '../../common/page';
 
 Page({
+  data: {
+    currentValue: 30
+  },
+
   onChange(event) {
     wx.showToast({
       icon: 'none',
       title: `当前值：${event.detail}`
     });
+  },
+
+  onDrag(event) {
+    this.setData({
+      currentValue: event.detail.value
+    });
   }
 });

example/pages/slider/index.wxml

@@ -1,5 +1,9 @@
 <demo-block title="基础用法">
-  <van-slider custom-class="slider" value="50" bind:change="onChange" />
+  <van-slider
+    value="50"
+    custom-class="slider"
+    bind:change="onChange"
+  />
 </demo-block>
 
 <demo-block title="指定选择范围">
@@ -13,7 +17,11 @@
 </demo-block>
 
 <demo-block title="禁用">
-  <van-slider custom-class="slider" value="50" disabled />
+  <van-slider
+    custom-class="slider"
+    value="50"
+    disabled
+  />
 </demo-block>
 
 <demo-block title="指定步长">
@@ -25,3 +33,16 @@
     bind:change="onChange"
   />
 </demo-block>
+
+<demo-block title="自定义按钮">
+  <van-slider
+    value="{{ currentValue }}"
+    custom-class="slider"
+    use-button-slot
+    bind:drag="onDrag"
+  >
+    <view class="custom-button" slot="button">
+      {{ currentValue }}/100
+    </view>
+  </van-slider>
+</demo-block>

example/pages/slider/index.wxss

@@ -1,3 +1,13 @@
 .slider {
   margin: 0 15px 30px;
-}
+}
+
+.custom-button {
+  width: 44px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 100px;
+  background-color: #f44;
+}

packages/slider/README.md

@@ -42,6 +42,34 @@ Page({
 <van-slider value="50" step="10" bar-height="4px" />
 ```
 
+#### 自定义按钮
+
+```html
+<van-slider
+  value="{{ currentValue }}"
+  use-button-slot
+  bind:drag="onDrag"
+>
+  <view class="custom-button" slot="button">
+    {{ currentValue }}/100
+  </view>
+</van-slider>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 30
+  },
+
+  onDrag(event) {
+    this.setData({
+      currentValue: event.detail.value
+    });
+  }
+});
+```
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       |
@@ -57,6 +85,7 @@ Page({
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
+| bind:drag | 拖动进度条时触发 | event.detail.value: 当前进度 |
 | bind:change | 进度值改变后触发 | event.detail: 当前进度 |
 
 ### 外部样式类

packages/slider/index.less

@@ -12,24 +12,27 @@
   }
 
   &__button {
-    position: absolute;
-    top: 50%;
-    right: 0;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: @white;
-    transform: translate3d(50%, -50%, 0);
     box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
 
-    /* use pseudo element to expand touch area */
-    &::after {
-      content: '';
+    &-wrapper {
       position: absolute;
-      width: 200%;
-      height: 200%;
-      top: -50%;
-      left: -50%;
+      top: 50%;
+      right: 0;
+      transform: translate3d(50%, -50%, 0);
+  
+      /* use pseudo element to expand touch area */
+      &::after {
+        content: '';
+        position: absolute;
+        width: 200%;
+        height: 200%;
+        top: -50%;
+        left: -50%;
+      }
     }
   }
 

packages/slider/index.ts

@@ -6,6 +6,7 @@ VantComponent({
 
   props: {
     disabled: Boolean,
+    useButtonSlot: Boolean,
     max: {
       type: Number,
       value: 100
@@ -78,6 +79,7 @@ VantComponent({
         barStyle: `width: ${value}%; height: ${this.data.barHeight};`
       });
 
+      this.$emit('drag', { value });
       if (end) {
         this.$emit('change', value);
       }

packages/slider/index.wxml

@@ -1,11 +1,23 @@
-<view class="custom-class van-slider {{ disabled ? 'van-slider--disabled' : '' }}" bind:tap="onClick">
+<view
+  class="custom-class van-slider {{ disabled ? 'van-slider--disabled' : '' }}"
+  bind:tap="onClick"
+>
   <view class="van-slider__bar" style="{{ barStyle }}">
     <view
-      class="van-slider__button"
+      class="van-slider__button-wrapper"
       bind:touchstart="onTouchStart"
       catch:touchmove="onTouchMove"
       bind:touchend="onTouchEnd"
       bind:touchcancel="onTouchEnd"
-    />
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="button"
+      />
+      <view
+        wx:else
+        class="van-slider__button"
+      />
+    </view>
   </view>
 </view>