el-input限制正整数

### 配置 `el-input` 组件以限制正整数输入

为了使 Element UI 中的 `el-input` 只接受正整数作为输入，可以通过多种方法实现这一目标。

#### 方法一：使用 `v-model.number` 和正则表达式过滤非数字字符
通过结合 Vue.js 的双向绑定特性和 JavaScript 正则表达式的强大功能来达到目的。具体做法是在 `<el-input>` 标签内加入 `v-model.number` 属性以及 `oninput` 事件处理程序：

<el-input v-model.number="value" @input="handleInput"></el-input>

其中，在 methods 定义 handleInput 函数如下所示：

methods: {
    handleInput(event){
        this.value = event.target.value.replace(/[^0-9]/g, '');
    }
}

此法利用了 `v-model.number` 自动转换数据类型的特性，并借助于 `@input` 实现即时验证并清除任何不符合条件的内容[^1]。

#### 方法二：设置 `type="number"` 并隐藏默认控件
另一种更为简洁的方式是直接指定 `type="number"` 来限定输入范围为数值型，同时移除浏览器自带的方向键（即增加/减少按钮），从而让用户更专注于手动输入有效的正整数值:

/* 添加到全局样式文件 */
/deep/ .el-input input[type='number']{
    -moz-appearance:textfield;
}

/deep/ .el-input input::-webkit-outer-spin-button,
/deep/ .el-input input::-webkit-inner-spin-button {
    -webkit-appearance:none!important;
    margin:0;
}

对应 HTML 结构应调整为：

<el-input type="number" min="0" step="any" :controls="false" v-model="value"></el-input>

这里设置了最小值 (`min`) 参数防止负数被录入；而 `step="any"` 则允许任意精度的小数点后位数，不过由于已经限定了只能输入正整数，所以实际上不会影响最终效果[^4]。

以上两种方案都可以有效地让 `el-input` 接受唯一的正整数形式的数据输入。选择哪种取决于实际应用场景和个人偏好。