Element UI 数字输入框的实现

开发中经常有限制只能输入指定精度的数字的输入框的需求，使用el-input并不方便，推荐使用 el-input-number<el-input-number:controls="false"v-model="num":min="0":max="100":precision="0"></el-input-number

朝阳39

6494人浏览 · 2021-10-20 16:35:28

朝阳39 · 2021-10-20 16:35:28 发布

方法一：添加正则校验

缺点：需要根据需要变更正则表达式
在这里插入图片描述

<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)