feat(input): validation of max length support

src/hooks/useLengthLimit.tsx

@@ -1,14 +1,16 @@
-import { computed, ComputedRef } from 'vue';
+import { computed, ComputedRef, onMounted, watch } from 'vue';
 import isNumber from 'lodash/isNumber';
 import isObject from 'lodash/isObject';
 import log from '../_common/js/log';
 import { getCharacterLength, getUnicodeLength, limitUnicodeMaxLength } from '../_common/js/utils/helper';
+import { TdInputProps } from '@/components';
 
 export interface UseLengthLimitParams {
   value: string;
   maxlength: number;
   maxcharacter: number;
   allowInputOverMax: boolean;
+  onValidate?: TdInputProps['onValidate'];
 }
 
 export default function useLengthLimit(params: ComputedRef<UseLengthLimitParams>) {
@@ -44,6 +46,25 @@ export default function useLengthLimit(params: ComputedRef<UseLengthLimitParams>
     return '';
   });
 
+  const innerStatus = computed(() => {
+    if (limitNumber.value) {
+      const [current, total] = limitNumber.value.split('/');
+      return Number(current) > Number(total) ? 'error' : '';
+    }
+    return '';
+  });
+
+  const onValidateChange = () => {
+    params.value.onValidate?.({
+      error: innerStatus.value ? 'exceed-maximum' : undefined,
+    });
+  };
+
+  watch(innerStatus, onValidateChange);
+
+  onMounted(() => {
+    innerStatus.value && onValidateChange();
+  });
   return {
     limitNumber,
     getValueByLimitNumber,

src/input/input.md

@@ -13,7 +13,7 @@ autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 是否开启无边框模式 | N
 clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 clearable | Boolean | false | 是否可清空 | N
-cursorColor | String | #0052d9 | 光标颜色，默认颜色值 #0052d9 | N
+cursorColor | String | #0052d9 | 光标颜色 | N
 disabled | Boolean | undefined | 是否禁用输入框 | N
 enterkeyhint | String | - | 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。可选项：enter/done/go/next/previous/search/send | N
 format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N

src/input/input.tsx

@@ -13,7 +13,7 @@ import { FormItemInjectionKey } from '../form/const';
 import { useFormDisabled } from '../form/hooks';
 import { usePrefixClass } from '../hooks/useClass';
 import { useTNodeJSX } from '../hooks/tnode';
-import useLengthLimit from '../hooks/useLengthLimit';
+import useLengthLimit from '@/hooks/useLengthLimit';
 
 const { prefix } = config;
 
@@ -80,6 +80,8 @@ export default defineComponent({
       maxlength: Number(props.maxlength),
       maxcharacter: props.maxcharacter,
       allowInputOverMax: props.allowInputOverMax,
+      status: props.status,
+      onValidate: props.onValidate,
     }));
 
     const { getValueByLimitNumber } = useLengthLimit(limitParams);

src/input/props.ts

@@ -39,7 +39,7 @@ export default {
   },
   /** 是否可清空 */
   clearable: Boolean,
-  /** 光标颜色，默认颜色值 #0052d9 */
+  /** 光标颜色 */
   cursorColor: {
     type: String,
     default: '#0052d9',

src/input/type.ts

@@ -42,7 +42,7 @@ export interface TdInputProps {
    */
   clearable?: boolean;
   /**
-   * 光标颜色，默认颜色值 #0052d9
+   * 光标颜色
    * @default #0052d9
    */
   cursorColor?: string;