vue3 input只能输入数字 输入法输入框失效

### 实现 Vue3 中仅允许输入数字并解决输入法问题

为了确保 `input` 组件在 Vue3 中只接受数字输入，并处理由于输入法引起的潜在问题，可以采用以下方法：

#### 方法一：使用正则表达式过滤非数字字符
通过监听 `input` 事件，在每次用户输入时检查输入的内容是否为数字。如果不是，则移除非数字字符。

<template>
  <input v-model="numberOnly" @input="handleInput">
</template>

<script setup>
import { ref } from 'vue';

const numberOnly = ref('');

function handleInput(event) {
  const newValue = event.target.value.replace(/[^0-9]/g, '');
  numberOnly.value = newValue;
}
</script>

这种方法简单有效，但在某些情况下可能会干扰用户体验，特别是当用户正在使用中文或其他语言的输入法时[^1]。

#### 方法二：延迟验证以支持输入法
为了避免影响输入法体验，可以在用户完成输入后再进行验证。这可以通过设置短暂的时间间隔来实现，从而给用户提供足够时间切换回英文模式再提交数据。

<template>
  <div>
    <input v-model.lazy.trim="typedValue" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import debounce from 'lodash/debounce'; 

let typedValue = ref('');
watch(typedValue, debounce((newValue) => {
  if (!/^\d*$/.test(newValue)) {
    typedValue.value = newValue.replace(/\D/g,'');
  }
}, 300));
</script>

这里引入了 lodash 的 `debounce` 函数来创建一个防抖动版本的 watcher 处理程序，它会在最后一次按键后的指定毫秒数内执行一次回调函数。这样既能够防止频繁触发不必要的更新操作，又不会打断用户的正常打字流程[^2]。

#### 方法三：利用 Composition API 和自定义指令
对于更加复杂的场景，还可以考虑编写一个专门针对此需求的自定义指令，以便更好地控制行为逻辑以及提高代码复用度。

// 定义全局插件或局部注册均可
app.directive('numeric', {
  mounted(el) {
    el.addEventListener('compositionstart', () => el.composing = true);
    el.addEventListener('compositionend', () => setTimeout(() => el.composing = false, 0));

    function filterNonNumeric(e){
      let val = e.target.value;
      if(!el.composing && !/^[\d]*$/.test(val)){
        e.target.value = val.replace(/[^\d]/g,"");
      }
    }

    ['input','blur'].forEach(eventName=>{
      el.addEventListener(eventName,filterNonNumeric);
    });
  },
});

上述代码片段展示了如何创建名为 `v-numeric` 的自定义指令，该指令会自动附加必要的事件监听器到目标元素上，确保即使是在组合编辑期间也能正确识别和响应非数值键入情况[^3]。