el-input限制只能输入数字

### 配置 `el-input` 组件仅允许输入数字

为了使 `el-input` 组件仅接受数字输入，可以通过多种方式实现这一功能。一种常见的方式是在事件处理函数中过滤掉非数字字符。

#### 方法一：使用正则表达式替换非法字符
通过监听 `@input` 事件，在每次用户输入时移除任何不符合条件的字符：

<el-input v-model="numberOnly" @input="(v) => (numberOnly = v.replace(/[^0-9]/g, ''))"></el-input>

这种方法简单直接，适用于只需要纯整数的情况[^1]。

#### 方法二：自定义指令限制输入内容
创建一个全局或局部的 Vue 自定义指令来自动清理输入框内的非数值数据:

import Vue from 'vue';

// 定义名为 LimitInputNumber 的指令
Vue.directive('limit-input-number', {
  bind(el){
    el.oninput = () => {
      // 移除非数字和小数点以外的所有字符
      el.value = el.value.replace(/[^\d.]/g,'');
      
      // 如果有多个小数点，则保留第一个并删除其余的小数点
      let decimalCount = (el.value.match(/\./g) || []).length;
      if(decimalCount > 1){
        el.value = el.value.slice(0, el.value.indexOf('.') + 1) +
                   el.value.slice(el.value.indexOf('.')).replace(/\./g,'');
      }
    };
  }
});

然后可以在模板里这样应用这个指令：

<el-input v-limit-input-number></el-input>

此方法不仅限于整数，还支持带有单一小数点的有效浮点数输入[^2]。

#### 方法三：利用内置组件特性
对于更严格的场景下（比如不允许负号），推荐考虑官方提供的专门用于数字输入的 `<el-input-number>` 组件，它天然就具备了对最小值最大值范围控制等功能。

<el-input-number v-model="numValue" controls-position="right" :min="0"></el-input-number>

以上三种方案都可以有效地达到让 `el-input` 接受特定类型的输入的目的，具体选择取决于实际需求以及项目复杂程度等因素。