方法一：添加正则校验
缺点：需要根据需要变更正则表达式
<template> <el-form ref="formRef" :model="formData" label-width="80px" size="mini"> <el-form-item label="数字" prop="num" :rules="[ { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change', }, ]" > <el-input clearable placeholder="请输入大于0的整数！" v-model="formData.num" style="width: 200px" ></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: {}, }; }, }; </script>
方法二：使用 el-input-number
缺点：输入超出最大和最小值的数据时，会自动更正为最大和最小值，用户容易产生误解，以为是bug。
<!-- 只能输入0-100的整数的数字输入框 --> <el-input-number :controls="false" v-model="num" :min="0" :max="100" :precision="0" ></el-input-number>
<!-- 只能输入-100到100的两位小数的数字输入框 --> <el-input-number :controls="false" v-model="num2" :min="-100" :max="100" :precision="2" ></el-input-number>
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| value / v-model | 绑定值 | number | — | 0 |
| min | 设置计数器允许的最小值 | number | — | -Infinity |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false |
| precision | 数值精度 | number | — | — |
| size | 计数器尺寸 | string | large, small | — |
| disabled | 是否禁用计数器 | boolean | — | false |
| controls | 是否使用控制按钮 | boolean | — | true |
| controls-position | 控制按钮位置 | string | right | - |
| name | 原生属性 | string | — | — |
| label | 输入框关联的label文字 | string | — | — |
| placeholder | 输入框默认 placeholder | string | - | - |
| 事件名称 | 说明 | 回调参数 |
| change | 绑定值被改变时触发 | currentValue, oldValue |
| blur | 在组件 Input 失去焦点时触发 | (event: Event) |
| focus | 在组件 Input 获得焦点时触发 | (event: Event) |
| 方法名 | 说明 | 参数 |
| focus | 使 input 获取焦点 | - |
| select | 选中 input 中的文字 | — |
若想实现更多功能，可以参考：
《Element UI 源码改造 —— 自定义数字输入框的实现》
https://blog.csdn.net/weixin_41192489/article/details/116748305
