fix(Input): 增加只允许输入数字

Author: Tenny

docs/components/input.md

@@ -10,6 +10,10 @@
 
   const inputInt = ref('')
 
+  const input1 = ref('')
+  const input2 = ref('')
+  const input3 = ref('')
+
   function numericParse(value: string) {
     let val = parseInt(value, 10)
     if (Number.isNaN(val)) {
@@ -64,6 +68,27 @@
   </CodePreview>
 </ClientOnly>
 
+### 允许输入的值
+
+通过传递 `allow-input` 来限制输入的值。`integer` 只能输入正整数, `number` 只能输入正数；以 `-` 开头表明允许输入负数; 以 `.2` 结尾表明小数点后精度; 例如: `-number.4` 表明允许输入数字，且小数点后保留4位小数。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue" v-pre>
+  <script setup lang="ts">
+  </script>
+  <template>
+    <hr />
+  </template>
+  </textarea>
+  <template #preview>
+    <Input v-model="input1" placeholder="只能输入正整数" allow-input="integer" />
+    <Input v-model="input2" placeholder="只能输入整数" allow-input="-integer" />
+    <Input v-model="input3" placeholder="输入数字,保留2位小数" allow-input="-number.2" />
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ### 禁用状态
 
 通过 `disabled` 属性设置输入框为禁用状态。
@@ -87,6 +112,7 @@
 | `model-value` / `v-model` | 绑定值  | `string` | — |
 | `placeholder` | 占位文本 | `string` | — |
 | `parser` | 输入时解析值 | `(value: string) => string` | — |
+| `allow-input` | 允许输入的值; `number`、`integer`,前面包含 `-` 表明允许小数, 以 `.2` 结尾表明小数点后精度 | `string` | - |
 
 ### Input Exposes
 

src/components/input/Input.vue

@@ -27,12 +27,15 @@ const props = withDefaults(
     parser?: (value: string) => string;
     modelValue?: string | number;
     disabled?: boolean;
+    /** number, integer */
+    allowInput?: string;
   }>(),
   {
     htmlType: 'text',
     placeholder: '',
     autosize: false,
     disabled: undefined,
+    allowInput: undefined,
   },
 );
 
@@ -46,10 +49,49 @@ function focus() {
   }
 }
 
+function numberInputParse(
+  value: string,
+  config: { integer: boolean; negative: boolean; precition: number },
+) {
+  let val = value;
+  let negative = config.negative ? '-?' : '';
+  if (config.integer) {
+    const match = val.match(new RegExp(`^(${negative}\\d*)`));
+    if (match != null) {
+      return match[1];
+    }
+    return val.substring(0, val.length - 1);
+  }
+  const match = val.match(
+    new RegExp(
+      `^(${negative}\\d+\\.\\d{0,${config.precition}})|(${negative}\\d*)`,
+    ),
+  );
+  if (match != null) {
+    val = match[1] || match[2];
+  } else {
+    val = '';
+  }
+  return match != null ? match[1] || match[2] : '';
+}
+
 function handleInput(e: Event) {
   const $target = e.target as HTMLInputElement;
   let value = $target.value;
   emits('input', e);
+  if (props.allowInput != null) {
+    let dotIndex = props.allowInput.indexOf('.');
+    let precition =
+      dotIndex === -1
+        ? dotIndex
+        : parseInt(props.allowInput.substring(dotIndex + 1));
+    value = numberInputParse(value, {
+      integer: props.allowInput.includes('integer'),
+      negative: props.allowInput.startsWith('-'),
+      precition: precition,
+    });
+    $target.value = String(value);
+  }
   if (props.parser != null) {
     value = props.parser(value) as string;
     $target.value = String(value);

src/hooks/useFormDisabled.ts

@@ -17,6 +17,7 @@ export default function useDisabled(
       return toValue<boolean>(formItemDisabeld as boolean);
     if (toValue(formDisabled) != null)
       return toValue<boolean>(formDisabled as boolean);
+    return false;
   });
 
   return isDisabled;

src/utils/index.ts

@@ -126,7 +126,7 @@ export function impactDetect(
   const maxWidth = window.innerWidth + scrollLeft - 10;
   // 判断 垂直 方向是否在显示区域内
   let y = targetRect.top + scrollTop - topDiff;
-  let yEnd = y + popoverRect.height;
+  const yEnd = y + popoverRect.height;
   // 1. 首先判断下边界是否超出屏幕
   if (yEnd > maxHeight) {
     // 下边距超出屏幕
@@ -154,7 +154,7 @@ export function impactDetect(
   // 判断 水平 方向是否在显示区域内
   // 1. 首先判断右边界是否超出屏幕
   let x = targetRect.left + scrollLeft - leftDiff;
-  let xEnd = x + popoverRect.width;
+  const xEnd = x + popoverRect.width;
   if (xEnd > maxWidth) {
     // 右边距超出屏幕
     if (mainAlign === 'top' || mainAlign === 'bottom') {