feat(Input): support format props (#3213)

* feat(Input): support format props * feat(Input): add format demo --------- Co-authored-by: jarmywang <[email protected]>
Tencent · Oct 24, 2024 · 159ab6b · 159ab6b
1 parent af6f9cf
commit 159ab6b
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 0 deletions.
diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md
@@ -23,6 +23,7 @@ cursor-spacing | Number | 0 | \- | N
 disabled | Boolean | false | make input to be disabled | N
 error-message | String | - | `deprecated` | N
 focus | Boolean | false | \- | N
+format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
 hold-keyboard | Boolean | false | \- | N
 label | String / Slot | - | text on the left of input。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 layout | String | horizontal | options: vertical/horizontal | N

diff --git a/src/input/README.md b/src/input/README.md
@@ -102,6 +102,7 @@ cursor-spacing | Number | 0 | 指定光标与键盘的距离，取 input 距离
 disabled | Boolean | false | 是否禁用输入框 | N
 error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
 focus | Boolean | false | 获取焦点 | N
+format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
 hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
 label | String / Slot | - | 左侧文本。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N

diff --git a/src/input/__test__/__snapshots__/demo.test.js.snap b/src/input/__test__/__snapshots__/demo.test.js.snap
@@ -201,6 +201,7 @@ exports[`Input Input special demo works fine 1`] = `
   </t-input>
   <t-input
     align="right"
+    format="{{[Function]}}"
     label="价格"
     placeholder="0.00"
     suffix="元"

diff --git a/src/input/_example/special/index.js b/src/input/_example/special/index.js
@@ -4,6 +4,13 @@ Component({
     phoneError: false,
     phoneNumber: '17600600600',
     priceError: false,
+    priceFormat: (v) => {
+      const isNumber = /^\d+(\.\d+)?$/.test(v);
+      if (isNumber) {
+        return parseFloat(v).toFixed(2);
+      }
+      return v;
+    },
   },
 
   methods: {

diff --git a/src/input/_example/special/index.wxml b/src/input/_example/special/index.wxml
@@ -33,6 +33,7 @@
   suffix="元"
   align="right"
   type="number"
+  format="{{priceFormat}}"
   bindchange="onPriceInput"
   tips="{{priceError ? '请输入正确的价格' : ''}}"
   t-class-tips="tips"

diff --git a/src/input/input.ts b/src/input/input.ts
@@ -102,6 +102,14 @@ export default class Input extends SuperComponent {
     },
     onBlur(e) {
       this.updateClearIconVisible();
+
+      // 失焦时处理 format
+      if (typeof this.properties.format === 'function') {
+        const v = this.properties.format(e.detail.value);
+        this.updateValue(v);
+        this.triggerEvent('blur', { value: this.data.value, cursor: this.data.count });
+        return;
+      }
       this.triggerEvent('blur', e.detail);
     },
     onConfirm(e) {

diff --git a/src/input/props.ts b/src/input/props.ts
@@ -76,6 +76,10 @@ const props: TdInputProps = {
     type: Boolean,
     value: false,
   },
+  /** 指定输入框展示值的格式 */
+  format: {
+    type: null,
+  },
   /** focus时，点击页面的时候不收起键盘 */
   holdKeyboard: {
     type: Boolean,

diff --git a/src/input/type.ts b/src/input/type.ts
@@ -117,6 +117,13 @@ export interface TdInputProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 指定输入框展示值的格式
+   */
+  format?: {
+    type: undefined;
+    value?: InputFormatType;
+  };
   /**
    * focus时，点击页面的时候不收起键盘
    * @default false
@@ -302,4 +309,6 @@ export interface TdInputProps {
   };
 }
 
+export type InputFormatType = (value: InputValue) => string;
+
 export type InputValue = string | number;