vue中input输⼊框，限制只能输⼊⼩数点后俩位
vue中input输⼊框，限制只能输⼊⼩数点后俩位
考虑到了代码的复⽤。在input中，设置输⼊整数很简单
<el-input onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="editForm.tBiddingSku" auto-complete="off"></el-input>
这样处理就⾏。但是如果限制为只能输⼊⼩数点后俩位。还要去解决输⼊⼈的破坏性输⼊。⽐如输⼊ .22 、 1. 等等。怎么在输⼊框中直接就处理掉。
第⼀步，新建validation.js
import Vue from'vue'
/**权限指令**/
const decimal = Vue.directive('decimal',{
inserted:function(el, binding, vnode){
const input = el.getElementsByTagName('input')[0];
//添加@input事件
var regStrs =[
['^0(\\d+)$','$1'],//禁⽌录⼊整数部分两位以上，但⾸位为0
['[^\\d\\.]+$',''],//禁⽌录⼊任何⾮数字和点
['\\.(\\d?)\\.+','.$1'],//禁⽌录⼊两个以上的点
['^(\\d+\\.\\d{2}).+','$1']//禁⽌录⼊⼩数点后两位以上
];
for(var i =0; i < regStrs.length; i++){
var reg =new RegExp(regStrs[i][0]);
input.value = place(reg, regStrs[i][1]);
}
trigger(input,'input')
}
//添加@blur事件，光标切换之后对数字进⾏补位
var v = input.value;
if(v ===''){
v ='0.00';
}else if(v ==='0'){
v ='0.00';
}else if(v ==='0.'){
v ='0.00';
}else if(v ==='.00'){
v ='0.00';
}else if(/^0+\d+\.?\d*.*$/.test(v)){
v = v.replace(/^0+(\d+\.?\d*).*$/,'$1');
v = RightPriceFormat(v).val;
}else if(/^0\.\d$/.test(v)){
v = v +'0';
}else if(!/^\d+\.\d{2}$/.test(v)){
if(/^\d+\.\d{2}.+/.test(v)){
v = v.replace(/^(\d+\.\d{2}).*$/,'$1');
}else if(/^\d+$/.test(v)){
v = v +'.00';
}else if(/^\d+\.$/.test(v)){
}else if(/^\d+\.$/.test(v)){
v = v +'00';
}else if(/^\d+\.\d$/.test(v)){
v = v +'0';
}else if(/^[^\d]+\d+\.?\d*$/.test(v)){
v = v.replace(/^[^\d]+(\d+\.?\d*)$/,'$1');
}else if(/\d+/.test(v)){
v = v.replace(/^[^\d]*(\d+\.?\d*).*$/,'$1');
ty =false;
}else if(/^0+\d+\.?\d*$/.test(v)){
v = v.replace(/^0+(\d+\.?\d*)$/,'$1');
ty =false;
}else{
v ='0.00';
}input绑定onblur事件
}
input.value = v;
}
trigger(input,'input')
//  console.log(input,trigger(input, 'input'));
}
});
const trigger=(el, type)=>{
const e = ateEvent('HTMLEvents')
e.initEvent(type,true,true)
el.dispatchEvent(e)
}
export{decimal}
这个⾥⾯困扰我最长的是。我获取到了input标签，就是el. 然后怎么去添加对应事件。了好久，原来很简单
//添加@input事件
}
//添加@blur事件，光标切换之后对数字进⾏补位
}
然后在main.js中加⼊
import decimal from'@/api/validation.js';
最后就是使⽤了
<el-input v-model="editForm.tTheorySku" v-decimal auto-complete="off"></el-input>
也就是加⼊ v-decimal 就可以限制输⼊框中只能输⼊俩位数的数字咯。在这⾥注意了，如果你输⼊的是 .22 我会默认为 22 ，会认为你前⾯的. 是不⼩⼼输⼊的。
以上只是个⼈的思路，应该还有更好的办法。当然咯，该输⼊框还可以进⾏扩展，你想怎么定义都⾏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。