Merge pull request #3107 from rex-zsd/feat/slider_20200505

feat(slider): support model value

packages/slider/index.ts

@@ -1,7 +1,7 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 import { Weapp } from 'definitions/weapp';
-import { addUnit } from '../common/utils';
+import { canIUseModel } from '../common/version';
 
 VantComponent({
   mixins: [touch],
@@ -26,9 +26,7 @@ VantComponent({
     value: {
       type: Number,
       value: 0,
-      observer(value: number) {
-        this.updateValue(value, false);
-      },
+      observer: 'updateValue',
     },
     barHeight: {
       type: null,
@@ -93,14 +91,13 @@ VantComponent({
 
     updateValue(value: number, end: boolean, drag: boolean) {
       value = this.format(value);
-      const { barHeight, min } = this.data;
+      const { min } = this.data;
       const width = `${((value - min) * 100) / this.getRange()}%`;
 
       this.setData({
         value,
         barStyle: `
           width: ${width};
-          height: ${addUnit(barHeight)};
           ${drag ? 'transition: none;' : ''}
         `,
       });
@@ -112,6 +109,10 @@ VantComponent({
       if (end) {
         this.$emit('change', value);
       }
+
+      if ((drag || end) && canIUseModel()) {
+        this.setData({ value });
+      }
     },
 
     getRange() {

packages/slider/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="custom-class {{ utils.bem('slider', { disabled }) }}"
@@ -7,7 +8,7 @@
 >
   <view
     class="van-slider__bar"
-    style="{{ barStyle }}; {{ activeColor ? 'background:' + activeColor : '' }}"
+    style="{{ barStyle }};{{ computed.barStyle(barHeight, activeColor) }}"
   >
     <view
       class="van-slider__button-wrapper"

packages/slider/index.wxs

@@ -0,0 +1,20 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+
+function barStyle(barHeight, activeColor) {
+  var styles = [['height', utils.addUnit(barHeight)]];
+
+  if (activeColor) {
+    styles.push(['background', activeColor]);
+  }
+
+  return styles
+    .map(function (item) {
+      return item.join(':');
+    })
+    .join(';');
+}
+
+module.exports = {
+  barStyle: barStyle,
+};