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

* feat(Input): support format props * docs(Input): update
Tencent · Sep 25, 2024 · 68b5ca8 · 68b5ca8
1 parent b0c1a18
commit 68b5ca8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/input/input.md b/src/input/input.md
@@ -14,7 +14,7 @@ borderless | Boolean | false | 是否开启无边框模式 | N
 clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | undefined | 是否禁用输入框 | N
-format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N
+format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N
 label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N

diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -4,6 +4,7 @@ import {
   BrowseOffIcon as TBrowseOffIcon,
   CloseCircleFilledIcon as TCloseCircleFilledIcon,
 } from 'tdesign-icons-vue-next';
+import isFunction from 'lodash/isFunction';
 import config from '../config';
 import InputProps from './props';
 import { InputValue, TdInputProps } from './type';
@@ -132,6 +133,17 @@ export default defineComponent({
 
     const handleBlur = (e: FocusEvent) => {
       focused.value = false;
+
+      // 失焦时处理 format
+      if (isFunction(props.format)) {
+        innerValue.value = props.format(innerValue.value);
+        nextTick(() => {
+          setInputValue(innerValue.value);
+          props.onBlur?.(innerValue.value, { e });
+        });
+        return;
+      }
+
       props.onBlur?.(innerValue.value, { e });
     };