feat(input): enable props clear-trigger

Tencent · Sep 21, 2023 · 40a5ce6 · 40a5ce6
1 parent c0b9c85
commit 40a5ce6
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 1 deletion.
diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md
@@ -10,6 +10,7 @@ align | String | left | options：left/center/right | N
 layout | String | horizontal | options：vertical/horizontal | N
 borderless | Boolean | true | \- | N
 clearable | Boolean | false | \- | N
+clear-trigger | String | always | options：always / focus | N
 disabled | Boolean | - | \- | N
 error-message | String | - | `deprecated` | N
 external-classes | Array | - | `['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N

diff --git a/src/input/README.md b/src/input/README.md
@@ -82,6 +82,7 @@ align | String | left | 文本内容位置，居左/居中/居右。可选项：
 layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
 borderless | Boolean | false | 是否开启无边框模式 | N
 clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
+clear-trigger | String | always | 清空图标触发方式。可选项：always / focus | N
 disabled | Boolean | false | 是否禁用输入框 | N
 error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
 format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N

diff --git a/src/input/input.ts b/src/input/input.ts
@@ -32,6 +32,7 @@ export default class Input extends SuperComponent {
     classPrefix: name,
     classBasePrefix: prefix,
     excludeType: ['number', 'digit'],
+    showClearIcon: true,
   };
 
   lifetimes = {
@@ -59,6 +60,10 @@ export default class Input extends SuperComponent {
         _clearIcon: calcIcon(v, 'close-circle-filled'),
       });
     },
+
+    clearTrigger(v) {
+      this.setData({ showClearIcon: v === 'always' });
+    },
   };
 
   methods = {
@@ -90,9 +95,12 @@ export default class Input extends SuperComponent {
       this.triggerEvent('change', { value: this.data.value, cursor, keyCode });
     },
     onFocus(e) {
+      this.setData({ showClearIcon: true });
       this.triggerEvent('focus', e.detail);
     },
     onBlur(e) {
+      const { clearTrigger } = this.properties;
+      this.setData({ showClearIcon: clearTrigger === 'always' });
       this.triggerEvent('blur', e.detail);
     },
     onConfirm(e) {

diff --git a/src/input/input.wxml b/src/input/input.wxml
@@ -68,7 +68,7 @@
           安卓不会播报aria-label，会播报aria-roledescription的内容
         -->
       <view
-        wx:if="{{_clearIcon && value.length > 0}}"
+        wx:if="{{_clearIcon && value.length > 0 && showClearIcon}}"
         class="{{classPrefix}}__wrap--clearable-icon"
         bind:touchstart="clearInput"
       >

diff --git a/src/input/props.ts b/src/input/props.ts
@@ -26,6 +26,11 @@ const props: TdInputProps = {
     type: null,
     value: false,
   },
+  /** 清空图标触发方式 */
+  clearTrigger: {
+    type: String,
+    value: 'always',
+  },
   /** 是否禁用输入框 */
   disabled: {
     type: Boolean,

diff --git a/src/input/type.ts b/src/input/type.ts
@@ -37,6 +37,14 @@ export interface TdInputProps {
     type: null;
     value?: boolean | object;
   };
+  /**
+   * 清空图标触发方式
+   * @default always
+   */
+  clearTrigger?: {
+    type: StringConstructor;
+    value?: 'always' | 'focus';
+  };
   /**
    * 自定义组件样式
    * @default ''