Element UI 数字输入框的实现

方法一：添加正则校验

缺点：需要根据需要变更正则表达式

<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:"
      ></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 源码改造 —— 自定义数字输入框的实现》​