vue数值限制组件封装（整数、浮点数）

最新推荐文章于 2024-08-16 09:44:41 发布

sinat_34849421

最新推荐文章于 2024-08-16 09:44:41 发布

阅读量1.4k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/sinat_34849421/article/details/114251409

版权

本文介绍了在Vue项目中如何封装一个数值限制组件，用于处理整数和浮点数的输入限制。通过扩展el-input组件，实现了输入范围、精度限制，并在超出限制时自动修正。文章包含组件的HTML和JavaScript实现代码，以及组件调用的示例。

摘要由CSDN通过智能技术生成

在实际项目中，我们经常会用到编辑框，有时需要对输入做限制和校验。

其中，最频繁的要数数值限制了，比如只能输入整数，范围10~50
再比如只能输入小数，精度为1，范围35.5~40.5等
那么是否可以使用组件来统一处理之类编辑框呢？

答案是肯定的啦，只需对el-input组件进行扩展即可

el-input用法

官网的说明文档里有设置min和max的属性

Input Attributes

参数	说明	类型	可选值
type	类型	string	text，textarea 和其他原生 input 的 type 值.
max	原生属性，设置最大值	—	—
min	原生属性，设置最小值	—	—

测试demo

<el-input type="number" v-model="ruleForm.times" :min="1" :max="10"></el-input>

类型必须为number，否则min 和 max无效

1.点击编辑框右侧的上下箭头，数值范围为1~10
2.当输入无效数值99时，编辑框未变更为有效范围

可以看到，type=number、min、max和input的原生属性一致，Element-UI里未做优化

自定义组件

显然，原生的属性无法满足需求，我们需要对它进行封装

HTML代码

<template>
    <el-input v-model="cfgValue" :disabled="disabled"  @input.native="handleNumber($event)" @blur="handleBlur"></el-input>
</template>

JavaScript代码

export default {
   
    props: {
   
        range: {
   
            type: Array,
            default: function() {
   
                return []
            }
        },
        disabled: {
   
            type: Boolean,
            default: false
        },
        value: {
   
            type: Number
        },
        floatNum: {
   
            type: Number,
            default: 0
        }
    },
    data() {
   
        return {
   
            cfgValue: 0
        }
    },
    mounted(