diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md index 8a3cecd09..8833b02ad 100644 --- 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 index d53082c96..1645da73d 100644 --- 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 index 9df490d04..4cc5b3033 100644 --- 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`] = ` { + 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 index 2548767a9..d74f859e8 100644 --- 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 index 78df830f2..dbbea1e79 100644 --- 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 index 8126174bb..61af861a4 100644 --- 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 index adb8ebf7d..fe105767a 100644 --- 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;