一、前言
常见的el-input
可能会限制用户只能输入正整数或保留两位小数,达到输入金额的需求,点击【跳转】访问el-input
的官方文档
element-ui
是有el-input-number
这个组件,但是个人觉得不适用,该组件更适合加减数量,点击【跳转】访问el-input-number
的官方文档
二、实现
2.1、HTML
<template>
<el-input
v-model="number"
@input="validateInput"
/>
</template>
2.2、只输入正整数
export default {
data() {
return {
number: ""
}
},
methods: {
// 限制正整数输入
validateInput(value) {
value = value.replace(/[^0-9]/g, "");
if (value.indexOf(0) == 0) {
value = "";
}
this.number = value;
}
}
}
2.3、只能输入数字或小数点
export default {
data() {
return {
number: "",
}
},
methods: {
// 限制只能输入数字或小数点
validateInput(value) {
value = value.replace(/[^\d{1,}.\d{1,}|\d{1,}]/g, "");
value = value.replace(/^(-)*(\d+).(\d\d).*$/, "$1$2.$3");
this.number = value;
}
}
}
三、最后
本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕