docs(changelog): 1.8.4

feat(Search): add clear-trigger prop

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({
+      let showClear = false;
-        showClear: !!clearable && !!focused && !!value && !readonly,
+      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 =
+      if (!isDef(page)) {
-        ((_a = page.vanPageScroller) === null || _a === void 0
+        page.vanPageScroller =
-          ? void 0
+          ((_a = page.vanPageScroller) === null || _a === void 0
-          : _a.filter((item) => item !== scroller)) || [];
+            ? 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);
+      if (this.isRange(value)) {
-      const { min } = this.data;
+        value = this.handleOverlap(value).map((val) => this.format(val));
-      const width = `${((value - min) * 100) / this.getRange()}%`;
+      } 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)}

docs/markdown/changelog.md

@@ -1,5 +1,20 @@
 # 更新日志
 
+### [1.8.4](https://github.com/youzan/vant-weapp/compare/v1.8.3...v1.8.4)
+
+`2021-09-07`
+
+**Bug Fixes**
+
+- page-scroll: 修复 getCurrentPage 为空时报错 [#4458](https://github.com/youzan/vant-weapp/issues/4458)
+
+**Features**
+
+- Field: 新增 clear-trigger 属性 [#4461](https://github.com/youzan/vant-weapp/issues/4461)
+- Search: 新增 clear-icon 属性 [#4463](https://github.com/youzan/vant-weapp/issues/4463)
+- Search: 新增 clear-trigger 属性 [9e17b13](https://github.com/youzan/vant-weapp/commit/9e17b13164e57ff09140d755870853f702a89a39)
+- Slider: 新增 range 属性 [#4442](https://github.com/youzan/vant-weapp/issues/4442)
+
 ### [v1.8.3](https://github.com/youzan/vant-weapp/compare/v1.8.2...v1.8.3)
 
 `2021-08-30`

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({
+      var showClear = false;
-        showClear: !!clearable && !!focused && !!value && !readonly,
+      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 =
+      if (!utils_1.isDef(page)) {
-        ((_a = page.vanPageScroller) === null || _a === void 0
+        page.vanPageScroller =
-          ? void 0
+          ((_a = page.vanPageScroller) === null || _a === void 0
-          : _a.filter(function (item) {
+            ? void 0
-              return item !== scroller;
+            : _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 _this = this;
-      var min = this.data.min;
+      if (this.isRange(value)) {
-      var width = ((value - min) * 100) / this.getRange() + '%';
+        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)}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/weapp",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "author": "youzan",
   "license": "MIT",
   "miniprogram": "lib",

packages/search/README.md

@@ -111,50 +111,51 @@ Page({
 
 ### Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数                   | 说明                                                                                              | 类型               | 默认值    |
-| --- | --- | --- | --- | --- |
+| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------ | ---       |
-| name | 在表单内提交时的标识符 | _string_ | - | - |
+| name                   | 在表单内提交时的标识符                                                                            | _string_           | -         |
-| label | 搜索框左侧文本 | _string_ | - | - |
+| label                  | 搜索框左侧文本                                                                                    | _string_           | -         |
-| shape | 形状，可选值为 `round` | _string_ | `square` | - |
+| shape                  | 形状，可选值为 `round`                                                                            | _string_           | `square`  |
-| value | 当前输入的值 | _string \| number_ | - | - |
+| value                  | 当前输入的值                                                                                      | _string \| number_ | -         |
-| background | 搜索框背景色 | _string_ | `#f2f2f2` | - |
+| background             | 搜索框背景色                                                                                      | _string_           | `#f2f2f2` |
-| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` | - |
+| show-action            | 是否在搜索框右侧显示取消按钮                                                                      | _boolean_          | `false`   |
-| action-text | 取消按钮文字 | _boolean_ | `取消` | 1.0.0 |
+| action-text `v1.0.0`   | 取消按钮文字                                                                                      | _boolean_          | `取消`    |
-| focus | 获取焦点 | _boolean_ | `false` | - |
+| focus                  | 获取焦点                                                                                          | _boolean_          | `false`   |
-| error | 是否将输入内容标红 | _boolean_ | `false` | - |
+| error                  | 是否将输入内容标红                                                                                | _boolean_          | `false`   |
-| disabled | 是否禁用输入框 | _boolean_ | `false` | - |
+| disabled               | 是否禁用输入框                                                                                    | _boolean_          | `false`   |
-| readonly | 是否只读 | _boolean_ | `false` | - |
+| readonly               | 是否只读                                                                                          | _boolean_          | `false`   |
-| clearable | 是否启用清除控件 | _boolean_ | `true` | - |
+| clearable              | 是否启用清除控件                                                                                  | _boolean_          | `true`    |
-| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` | - |
+| clear-trigger `v1.8.4` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示     | _string_           | `focus`   |
-| use-action-slot | 是否使用 action slot | _boolean_ | `false` | - |
+| clear-icon `v1.8.4`    | 清除[图标名称](#/icon)或图片链接                                                                  | _string_           | `clear`   |
-| placeholder | 输入框为空时占位符 | _string_ | - | - |
+| maxlength              | 最大输入长度，设置为 -1 的时候不限制最大长度                                                      | _number_           | `-1`      |
-| placeholder-style | 指定占位符的样式 | _string_ | - | - |
+| use-action-slot        | 是否使用 action slot                                                                              | _boolean_          | `false`   |
-| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` | - |
+| placeholder            | 输入框为空时占位符                                                                                | _string_           | -         |
-| use-left-icon-slot | 是否使用输入框左侧图标 slot | _boolean_ | `false` | - |
+| placeholder-style      | 指定占位符的样式                                                                                  | _string_           | -         |
-| use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` | - |
+| input-align            | 输入框内容对齐方式，可选值为 `center` `right`                                                     | _string_           | `left`    |
-| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效） | _string_ | `search` | - |
+| use-left-icon-slot     | 是否使用输入框左侧图标 slot                                                                       | _boolean_          | `false`   |
-| right-icon | 输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效） | _string_ | - | - |
+| use-right-icon-slot    | 是否使用输入框右侧图标 slot                                                                       | _boolean_          | `false`   |
-| clear-icon `v1.8.4` | 清除[图标名称](#/icon)或图片链接 | _string_ | `clear` |
+| left-icon              | 输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）   | _string_           | `search`  |
+| right-icon             | 输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）  | _string_           | -         |
 
 ### Events
 
-| 事件名      | 说明               | 参数                     |
+| 事件名           | 说明               | 参数                     |
-| ----------- | ------------------ | ------------------------ |
+| ---------------- | ------------------ | ------------------------ |
-| bind:search | 确定搜索时触发     | event.detail: 当前输入值 |
+| bind:search      | 确定搜索时触发     | event.detail: 当前输入值 |
-| bind:change | 输入内容变化时触发 | event.detail: 当前输入值 |
+| bind:change      | 输入内容变化时触发 | event.detail: 当前输入值 |
-| bind:cancel | 取消搜索搜索时触发 | -                        |
+| bind:cancel      | 取消搜索搜索时触发 | -                        |
-| bind:focus  | 输入框聚焦时触发   | -                        |
+| bind:focus       | 输入框聚焦时触发   | -                        |
-| bind:blur   | 输入框失焦时触发   | -                        |
+| bind:blur        | 输入框失焦时触发   | -                        |
-| bind:clear  | 点击清空控件时触发 | -                        |
+| bind:clear       | 点击清空控件时触发 | -                        |
-| bind:click-input | 点击搜索区域时触发 | -                   |
+| bind:click-input | 点击搜索区域时触发 | -                        |
 
 ### Slot
 
-| 名称 | 说明 |
+| 名称       | 说明                                                                |
-| --- | --- |
+| ---------- | ------------------------------------------------------------------- |
-| action | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示 |
+| action     | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示     |
-| label | 自定义搜索框左侧文本 |
+| label      | 自定义搜索框左侧文本                                                |
-| left-icon | 自定义输入框左侧图标，需要在`use-left-icon-slot`为 true 时才会显示 |
+| left-icon  | 自定义输入框左侧图标，需要在`use-left-icon-slot`为 true 时才会显示  |
 | right-icon | 自定义输入框右侧图标，需要在`use-right-icon-slot`为 true 时才会显示 |
 
 ### 外部样式类

packages/search/index.ts

@@ -44,6 +44,10 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    clearTrigger: {
+      type: String,
+      value: 'focus',
+    },
     clearIcon: {
       type: String,
       value: 'clear',

packages/search/index.wxml

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