build: compile 1.8.4

dist/field/index.js

@@ -36,6 +36,10 @@ VantComponent({
         type: Boolean,
         observer: 'setShowClear',
       },
+      clearTrigger: {
+        type: String,
+        value: 'focus',
+      },
       border: {
         type: Boolean,
         value: true,
@@ -44,6 +48,10 @@ VantComponent({
         type: String,
         value: '6.2em',
       },
+      clearIcon: {
+        type: String,
+        value: 'clear',
+      },
     }
   ),
   data: {
@@ -115,11 +123,16 @@ VantComponent({
       });
     },
     setShowClear() {
-      const { clearable, readonly } = this.data;
+      const { clearable, readonly, clearTrigger } = this.data;
       const { focused, value } = this;
-      this.setData({
-        showClear: !!clearable && !!focused && !!value && !readonly,
-      });
+      let showClear = false;
+      if (clearable && !readonly) {
+        const hasValue = !!value;
+        const trigger =
+          clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
+        showClear = hasValue && trigger;
+      }
+      this.setData({ showClear });
     },
     noop() {},
   },

dist/field/index.wxml

@@ -29,7 +29,7 @@
 
     <van-icon
       wx:if="{{ showClear }}"
-      name="clear"
+      name="{{ clearIcon }}"
       class="van-field__clear-root van-field__icon-root"
       catch:touchstart="onClear"
     />

dist/mixins/page-scroll.js

@@ -1,4 +1,4 @@
-import { getCurrentPage } from '../common/utils';
+import { getCurrentPage, isDef } from '../common/utils';
 function onPageScroll(event) {
   const { vanPageScroller = [] } = getCurrentPage();
   vanPageScroller.forEach((scroller) => {
@@ -25,9 +25,11 @@ export const pageScrollMixin = (scroller) =>
     detached() {
       var _a;
       const page = getCurrentPage();
-      page.vanPageScroller =
-        ((_a = page.vanPageScroller) === null || _a === void 0
-          ? void 0
-          : _a.filter((item) => item !== scroller)) || [];
+      if (!isDef(page)) {
+        page.vanPageScroller =
+          ((_a = page.vanPageScroller) === null || _a === void 0
+            ? void 0
+            : _a.filter((item) => item !== scroller)) || [];
+      }
     },
   });

dist/search/index.js

@@ -41,6 +41,14 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    clearTrigger: {
+      type: String,
+      value: 'focus',
+    },
+    clearIcon: {
+      type: String,
+      value: 'clear',
+    },
   },
   methods: {
     onChange(event) {

dist/search/index.wxml

@@ -21,6 +21,8 @@
       disabled="{{ disabled }}"
       readonly="{{ readonly }}"
       clearable="{{ clearable }}"
+      clear-trigger="{{ clearTrigger }}"
+      clear-icon="{{ clearIcon }}"
       maxlength="{{ maxlength }}"
       input-align="{{ inputAlign }}"
       input-class="input-class"

dist/slider/index.js

@@ -5,6 +5,7 @@ import { getRect } from '../common/utils';
 VantComponent({
   mixins: [touch],
   props: {
+    range: Boolean,
     disabled: Boolean,
     useButtonSlot: Boolean,
     activeColor: String,
@@ -24,6 +25,7 @@ VantComponent({
     value: {
       type: Number,
       value: 0,
+      optionalTypes: [Array],
       observer(val) {
         if (val !== this.value) {
           this.updateValue(val);
@@ -38,8 +40,18 @@ VantComponent({
   methods: {
     onTouchStart(event) {
       if (this.data.disabled) return;
+      const { index } = event.currentTarget.dataset;
+      if (typeof index === 'number') {
+        this.buttonIndex = index;
+      }
       this.touchStart(event);
       this.startValue = this.format(this.value);
+      this.newValue = this.value;
+      if (this.isRange(this.newValue)) {
+        this.startValue = this.newValue.map((val) => this.format(val));
+      } else {
+        this.startValue = this.format(this.newValue);
+      }
       this.dragStatus = 'start';
     },
     onTouchMove(event) {
@@ -51,7 +63,12 @@ VantComponent({
       this.dragStatus = 'draging';
       getRect(this, '.van-slider').then((rect) => {
         const diff = (this.deltaX / rect.width) * this.getRange();
-        this.newValue = this.startValue + diff;
+        if (this.isRange(this.startValue)) {
+          this.newValue[this.buttonIndex] =
+            this.startValue[this.buttonIndex] + diff;
+        } else {
+          this.newValue = this.startValue + diff;
+        }
         this.updateValue(this.newValue, false, true);
       });
     },
@@ -68,17 +85,40 @@ VantComponent({
       getRect(this, '.van-slider').then((rect) => {
         const value =
           ((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
-        this.updateValue(value, true);
+        if (this.isRange(this.value)) {
+          const [left, right] = this.value;
+          const middle = (left + right) / 2;
+          if (value <= middle) {
+            this.updateValue([value, right], true);
+          } else {
+            this.updateValue([left, value], true);
+          }
+        } else {
+          this.updateValue(value, true);
+        }
       });
     },
+    isRange(val) {
+      const { range } = this.data;
+      return range && Array.isArray(val);
+    },
+    handleOverlap(value) {
+      if (value[0] > value[1]) {
+        return value.slice(0).reverse();
+      }
+      return value;
+    },
     updateValue(value, end, drag) {
-      value = this.format(value);
-      const { min } = this.data;
-      const width = `${((value - min) * 100) / this.getRange()}%`;
+      if (this.isRange(value)) {
+        value = this.handleOverlap(value).map((val) => this.format(val));
+      } else {
+        value = this.format(value);
+      }
       this.value = value;
       this.setData({
         barStyle: `
-          width: ${width};
+          width: ${this.calcMainAxis()};
+          left: ${this.isRange(value) ? `${value[0]}%` : 0};
           ${drag ? 'transition: none;' : ''}
         `,
       });
@@ -92,10 +132,23 @@ VantComponent({
         this.setData({ value });
       }
     },
+    getScope() {
+      return Number(this.data.max) - Number(this.data.min);
+    },
     getRange() {
       const { max, min } = this.data;
       return max - min;
     },
+    // 计算选中条的长度百分比
+    calcMainAxis() {
+      const { value } = this;
+      const { min } = this.data;
+      const scope = this.getScope();
+      if (this.isRange(value)) {
+        return `${((value[1] - value[0]) * 100) / scope}%`;
+      }
+      return `${((value - Number(min)) * 100) / scope}%`;
+    },
     format(value) {
       const { max, min, step } = this.data;
       return Math.round(Math.max(min, Math.min(value, max)) / step) * step;

dist/slider/index.wxml

@@ -11,6 +11,44 @@
     style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
   >
     <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-left') }}"
+      data-index="{{ 0 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="left-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+    <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-right') }}"
+      data-index="{{ 1 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="right-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+
+    <view
+      wx:if="{{ !range }}"
       class="{{ utils.bem('slider__button-wrapper') }}"
       bind:touchstart="onTouchStart"
       catch:touchmove="onTouchMove"

dist/slider/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-slider{position:relative;height:2px;height:var(--slider-bar-height,2px);border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider:before{position:absolute;right:0;left:0;content:"";top:-8px;top:-var(--padding-xs,8px);bottom:-8px;bottom:-var(--padding-xs,8px)}.van-slider__bar{position:relative;width:100%;height:100%;background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;transition:all .2s;transition:all var(--animation-duration-fast,.2s)}.van-slider__button{width:24px;width:var(--slider-button-width,24px);height:24px;height:var(--slider-button-height,24px);border-radius:50%;border-radius:var(--slider-button-border-radius,50%);box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:var(--slider-button-box-shadow,0 1px 2px rgba(0,0,0,.5));background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper{position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0)}.van-slider--disabled{opacity:.5;opacity:var(--slider-disabled-opacity,.5)}
+@import '../common/index.wxss';.van-slider{position:relative;height:2px;height:var(--slider-bar-height,2px);border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider:before{position:absolute;right:0;left:0;content:"";top:-8px;top:-var(--padding-xs,8px);bottom:-8px;bottom:-var(--padding-xs,8px)}.van-slider__bar{position:relative;width:100%;height:100%;background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;transition:all .2s;transition:all var(--animation-duration-fast,.2s)}.van-slider__button{width:24px;width:var(--slider-button-width,24px);height:24px;height:var(--slider-button-height,24px);border-radius:50%;border-radius:var(--slider-button-border-radius,50%);box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:var(--slider-button-box-shadow,0 1px 2px rgba(0,0,0,.5));background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper,.van-slider__button-wrapper-right{position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0)}.van-slider__button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0)}.van-slider--disabled{opacity:.5;opacity:var(--slider-disabled-opacity,.5)}

lib/field/index.js

@@ -53,6 +53,10 @@ component_1.VantComponent({
         type: Boolean,
         observer: 'setShowClear',
       },
+      clearTrigger: {
+        type: String,
+        value: 'focus',
+      },
       border: {
         type: Boolean,
         value: true,
@@ -61,6 +65,10 @@ component_1.VantComponent({
         type: String,
         value: '6.2em',
       },
+      clearIcon: {
+        type: String,
+        value: 'clear',
+      },
     }
   ),
   data: {
@@ -138,13 +146,19 @@ component_1.VantComponent({
     setShowClear: function () {
       var _a = this.data,
         clearable = _a.clearable,
-        readonly = _a.readonly;
+        readonly = _a.readonly,
+        clearTrigger = _a.clearTrigger;
       var _b = this,
         focused = _b.focused,
         value = _b.value;
-      this.setData({
-        showClear: !!clearable && !!focused && !!value && !readonly,
-      });
+      var showClear = false;
+      if (clearable && !readonly) {
+        var hasValue = !!value;
+        var trigger =
+          clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
+        showClear = hasValue && trigger;
+      }
+      this.setData({ showClear: showClear });
     },
     noop: function () {},
   },

lib/field/index.wxml

@@ -29,7 +29,7 @@
 
     <van-icon
       wx:if="{{ showClear }}"
-      name="clear"
+      name="{{ clearIcon }}"
       class="van-field__clear-root van-field__icon-root"
       catch:touchstart="onClear"
     />

lib/mixins/page-scroll.js

@@ -29,12 +29,14 @@ var pageScrollMixin = function (scroller) {
     detached: function () {
       var _a;
       var page = utils_1.getCurrentPage();
-      page.vanPageScroller =
-        ((_a = page.vanPageScroller) === null || _a === void 0
-          ? void 0
-          : _a.filter(function (item) {
-              return item !== scroller;
-            })) || [];
+      if (!utils_1.isDef(page)) {
+        page.vanPageScroller =
+          ((_a = page.vanPageScroller) === null || _a === void 0
+            ? void 0
+            : _a.filter(function (item) {
+                return item !== scroller;
+              })) || [];
+      }
     },
   });
 };

lib/search/index.js

@@ -43,6 +43,14 @@ component_1.VantComponent({
       type: Boolean,
       value: true,
     },
+    clearTrigger: {
+      type: String,
+      value: 'focus',
+    },
+    clearIcon: {
+      type: String,
+      value: 'clear',
+    },
   },
   methods: {
     onChange: function (event) {

lib/search/index.wxml

@@ -21,6 +21,8 @@
       disabled="{{ disabled }}"
       readonly="{{ readonly }}"
       clearable="{{ clearable }}"
+      clear-trigger="{{ clearTrigger }}"
+      clear-icon="{{ clearIcon }}"
       maxlength="{{ maxlength }}"
       input-align="{{ inputAlign }}"
       input-class="input-class"

lib/slider/index.js

@@ -7,6 +7,7 @@ var utils_1 = require('../common/utils');
 component_1.VantComponent({
   mixins: [touch_1.touch],
   props: {
+    range: Boolean,
     disabled: Boolean,
     useButtonSlot: Boolean,
     activeColor: String,
@@ -26,6 +27,7 @@ component_1.VantComponent({
     value: {
       type: Number,
       value: 0,
+      optionalTypes: [Array],
       observer: function (val) {
         if (val !== this.value) {
           this.updateValue(val);
@@ -39,9 +41,22 @@ component_1.VantComponent({
   },
   methods: {
     onTouchStart: function (event) {
+      var _this = this;
       if (this.data.disabled) return;
+      var index = event.currentTarget.dataset.index;
+      if (typeof index === 'number') {
+        this.buttonIndex = index;
+      }
       this.touchStart(event);
       this.startValue = this.format(this.value);
+      this.newValue = this.value;
+      if (this.isRange(this.newValue)) {
+        this.startValue = this.newValue.map(function (val) {
+          return _this.format(val);
+        });
+      } else {
+        this.startValue = this.format(this.newValue);
+      }
       this.dragStatus = 'start';
     },
     onTouchMove: function (event) {
@@ -54,7 +69,12 @@ component_1.VantComponent({
       this.dragStatus = 'draging';
       utils_1.getRect(this, '.van-slider').then(function (rect) {
         var diff = (_this.deltaX / rect.width) * _this.getRange();
-        _this.newValue = _this.startValue + diff;
+        if (_this.isRange(_this.startValue)) {
+          _this.newValue[_this.buttonIndex] =
+            _this.startValue[_this.buttonIndex] + diff;
+        } else {
+          _this.newValue = _this.startValue + diff;
+        }
         _this.updateValue(_this.newValue, false, true);
       });
     },
@@ -72,18 +92,47 @@ component_1.VantComponent({
       utils_1.getRect(this, '.van-slider').then(function (rect) {
         var value =
           ((event.detail.x - rect.left) / rect.width) * _this.getRange() + min;
-        _this.updateValue(value, true);
+        if (_this.isRange(_this.value)) {
+          var _a = _this.value,
+            left = _a[0],
+            right = _a[1];
+          var middle = (left + right) / 2;
+          if (value <= middle) {
+            _this.updateValue([value, right], true);
+          } else {
+            _this.updateValue([left, value], true);
+          }
+        } else {
+          _this.updateValue(value, true);
+        }
       });
     },
+    isRange: function (val) {
+      var range = this.data.range;
+      return range && Array.isArray(val);
+    },
+    handleOverlap: function (value) {
+      if (value[0] > value[1]) {
+        return value.slice(0).reverse();
+      }
+      return value;
+    },
     updateValue: function (value, end, drag) {
-      value = this.format(value);
-      var min = this.data.min;
-      var width = ((value - min) * 100) / this.getRange() + '%';
+      var _this = this;
+      if (this.isRange(value)) {
+        value = this.handleOverlap(value).map(function (val) {
+          return _this.format(val);
+        });
+      } else {
+        value = this.format(value);
+      }
       this.value = value;
       this.setData({
         barStyle:
           '\n          width: ' +
-          width +
+          this.calcMainAxis() +
+          ';\n          left: ' +
+          (this.isRange(value) ? value[0] + '%' : 0) +
           ';\n          ' +
           (drag ? 'transition: none;' : '') +
           '\n        ',
@@ -98,12 +147,25 @@ component_1.VantComponent({
         this.setData({ value: value });
       }
     },
+    getScope: function () {
+      return Number(this.data.max) - Number(this.data.min);
+    },
     getRange: function () {
       var _a = this.data,
         max = _a.max,
         min = _a.min;
       return max - min;
     },
+    // 计算选中条的长度百分比
+    calcMainAxis: function () {
+      var value = this.value;
+      var min = this.data.min;
+      var scope = this.getScope();
+      if (this.isRange(value)) {
+        return ((value[1] - value[0]) * 100) / scope + '%';
+      }
+      return ((value - Number(min)) * 100) / scope + '%';
+    },
     format: function (value) {
       var _a = this.data,
         max = _a.max,

lib/slider/index.wxml

@@ -11,6 +11,44 @@
     style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
   >
     <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-left') }}"
+      data-index="{{ 0 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="left-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+    <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-right') }}"
+      data-index="{{ 1 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="right-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+
+    <view
+      wx:if="{{ !range }}"
       class="{{ utils.bem('slider__button-wrapper') }}"
       bind:touchstart="onTouchStart"
       catch:touchmove="onTouchMove"

lib/slider/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-slider{position:relative;height:2px;height:var(--slider-bar-height,2px);border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider:before{position:absolute;right:0;left:0;content:"";top:-8px;top:-var(--padding-xs,8px);bottom:-8px;bottom:-var(--padding-xs,8px)}.van-slider__bar{position:relative;width:100%;height:100%;background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;transition:all .2s;transition:all var(--animation-duration-fast,.2s)}.van-slider__button{width:24px;width:var(--slider-button-width,24px);height:24px;height:var(--slider-button-height,24px);border-radius:50%;border-radius:var(--slider-button-border-radius,50%);box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:var(--slider-button-box-shadow,0 1px 2px rgba(0,0,0,.5));background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper{position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0)}.van-slider--disabled{opacity:.5;opacity:var(--slider-disabled-opacity,.5)}
+@import '../common/index.wxss';.van-slider{position:relative;height:2px;height:var(--slider-bar-height,2px);border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider:before{position:absolute;right:0;left:0;content:"";top:-8px;top:-var(--padding-xs,8px);bottom:-8px;bottom:-var(--padding-xs,8px)}.van-slider__bar{position:relative;width:100%;height:100%;background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;transition:all .2s;transition:all var(--animation-duration-fast,.2s)}.van-slider__button{width:24px;width:var(--slider-button-width,24px);height:24px;height:var(--slider-button-height,24px);border-radius:50%;border-radius:var(--slider-button-border-radius,50%);box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:var(--slider-button-box-shadow,0 1px 2px rgba(0,0,0,.5));background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper,.van-slider__button-wrapper-right{position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0)}.van-slider__button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0)}.van-slider--disabled{opacity:.5;opacity:var(--slider-disabled-opacity,.5)}