feat(input): 增加format属性

examples/input/demos/format.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="tdesign-demo-block-column" style="max-width: 500px">
+    <t-input v-model="input" :status="inputStatus" :format="format" placeholder="请输入数字" :tips="tips" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      input: '',
+    };
+  },
+  computed: {
+    inputStatus() {
+      if (isNaN(+this.input)) {
+        return 'error';
+      }
+      return '';
+    },
+    tips() {
+      if (!this.inputStatus) {
+        return '';
+      }
+      return '请输入数字';
+    },
+  },
+  methods: {
+    format(val) {
+      const reg = /(\d)(?=(?:\d{3})+$)/g;
+      const str = val.replace(reg, '$1,');
+      return str;
+    },
+  },
+};
+</script>

examples/input/demos/max-length-count.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="tdesign-demo-block-column" style="max-width: 500px">
+    <t-input v-model="input" :maxlength="5" :suffix="suffix" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      input: '',
+    };
+  },
+  computed: {
+    suffix() {
+      return `${this.input.length}/5`;
+    },
+  },
+};
+</script>

examples/input/input.md

@@ -10,11 +10,12 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
-autocomplete | Boolean | false | 是否开启自动填充功能 | N
+autocomplete | String | - | 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)。可选项：on/off | N
 autofocus | Boolean | false | 自动聚焦 | N
+autoWidth | Boolean | false | 宽度随内容自适应 | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | false | 是否禁用输入框 | N
-format | Function | - | 【讨论中】指定输入框展示值的格式。TS 类型：`(value: number | number) => number | string` | N
+format | Function | - | 指定输入框展示值的格式。TS 类型：`(value: InputValue) => number | string` | N
 label | String / Slot / Function | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
 maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N

src/input/input.tsx

@@ -39,6 +39,7 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
       isHover: false,
       focused: false,
       renderType: this.type,
+      inputValue: this.value,
     };
   },
   computed: {
@@ -88,6 +89,12 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
       },
       immediate: true,
     },
+    value: {
+      handler(val) {
+        this.inputValue = val;
+      },
+      immediate: true,
+    },
   },
 
   created() {
@@ -165,15 +172,19 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
       this.emitFocus(e);
     },
     emitFocus(e: FocusEvent) {
+      this.inputValue = this.value;
       if (this.tDisabled) return;
       this.focused = true;
       emitEvent<Parameters<TdInputProps['onFocus']>>(this, 'focus', this.value, { e });
     },
-    emitBlur(e: FocusEvent) {
+    formatAndEmitBlur(e: FocusEvent) {
+      if (this.format) {
+        this.inputValue = this.format(this.value);
+      }
       this.focused = false;
       emitEvent<Parameters<TdInputProps['onBlur']>>(this, 'blur', this.value, { e });
     },
-    onCompositionend(e: InputEvent) {
+    compositionendHandler(e: InputEvent) {
       this.inputValueChangeHandle(e);
     },
     inputValueChangeHandle(e: InputEvent) {
@@ -202,7 +213,7 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
   render(h: CreateElement): VNode {
     const inputEvents = getValidAttrs({
       focus: this.emitFocus,
-      blur: this.emitBlur,
+      blur: this.formatAndEmitBlur,
       keydown: this.handleKeydown,
       keyup: this.handleKeyUp,
       keypress: this.handleKeypress,
@@ -256,9 +267,9 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
           {...{ attrs: this.inputAttrs, on: inputEvents }}
           ref="refInputElem"
           class={`${name}__inner`}
-          value={this.value}
+          value={this.inputValue}
           onInput={this.handleInput}
-          onCompositionend={this.onCompositionend}
+          onCompositionend={this.compositionendHandler}
         />
         {suffixContent}
         {suffixIcon ? (

src/input/props.ts

@@ -16,15 +16,22 @@ export default {
       return ['left', 'center', 'right'].includes(val);
     },
   },
-  /** 是否开启自动填充功能 */
-  autocomplete: Boolean,
+  /** 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */
+  autocomplete: {
+    type: String as PropType<TdInputProps['autocomplete']>,
+    validator(val: TdInputProps['autocomplete']): boolean {
+      return ['on', 'off'].includes(val);
+    },
+  },
   /** 自动聚焦 */
   autofocus: Boolean,
+  /** 宽度随内容自适应 */
+  autoWidth: Boolean,
   /** 是否可清空 */
   clearable: Boolean,
   /** 是否禁用输入框 */
   disabled: Boolean,
-  /** 【讨论中】指定输入框展示值的格式 */
+  /** 指定输入框展示值的格式 */
   format: {
     type: Function as PropType<TdInputProps['format']>,
   },
@@ -105,6 +112,10 @@ export default {
   onChange: Function as PropType<TdInputProps['onChange']>,
   /** 清空按钮点击时触发 */
   onClear: Function as PropType<TdInputProps['onClear']>,
+  /** 中文输入结束时触发 */
+  onCompositionend: Function as PropType<TdInputProps['onCompositionend']>,
+  /** 中文输入开始时触发 */
+  onCompositionstart: Function as PropType<TdInputProps['onCompositionstart']>,
   /** 回车键按下时触发 */
   onEnter: Function as PropType<TdInputProps['onEnter']>,
   /** 获得焦点时触发 */
@@ -121,4 +132,6 @@ export default {
   onMouseleave: Function as PropType<TdInputProps['onMouseleave']>,
   /** 粘贴事件，`pasteValue` 表示粘贴板的内容 */
   onPaste: Function as PropType<TdInputProps['onPaste']>,
+  /** 输入框中滚动鼠标时触发 */
+  onWheel: Function as PropType<TdInputProps['onWheel']>,
 };

src/input/type.ts

@@ -13,15 +13,19 @@ export interface TdInputProps {
    */
   align?: 'left' | 'center' | 'right';
   /**
-   * 是否开启自动填充功能
-   * @default false
+   * 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
    */
-  autocomplete?: boolean;
+  autocomplete?: 'on' | 'off';
   /**
    * 自动聚焦
    * @default false
    */
   autofocus?: boolean;
+  /**
+   * 宽度随内容自适应
+   * @default false
+   */
+  autoWidth?: boolean;
   /**
    * 是否可清空
    * @default false
@@ -33,9 +37,9 @@ export interface TdInputProps {
    */
   disabled?: boolean;
   /**
-   * 【讨论中】指定输入框展示值的格式
+   * 指定输入框展示值的格式
    */
-  format?: (value: number | number) => number | string;
+  format?: (value: InputValue) => number | string;
   /**
    * 左侧文本
    */
@@ -112,6 +116,14 @@ export interface TdInputProps {
    * 清空按钮点击时触发
    */
   onClear?: (context: { e: MouseEvent }) => void;
+  /**
+   * 中文输入结束时触发
+   */
+  onCompositionend?: (value: InputValue, context: { e: CompositionEvent }) => void;
+  /**
+   * 中文输入开始时触发
+   */
+  onCompositionstart?: (value: InputValue, context: { e: CompositionEvent }) => void;
   /**
    * 回车键按下时触发
    */
@@ -144,6 +156,10 @@ export interface TdInputProps {
    * 粘贴事件，`pasteValue` 表示粘贴板的内容
    */
   onPaste?: (context: { e: ClipboardEvent; pasteValue: string }) => void;
+  /**
+   * 输入框中滚动鼠标时触发
+   */
+  onWheel?: (context: { e: WheelEvent }) => void;
 }
 
 export type InputValue = string | number;