自己写了一个自定义,只允许输入数字的input,把不符合规则的输入过滤掉:
onInput(e) {
let cval = e.target.value;
cval = cval.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
cval = cval.replace(/^\./g, ""); //验证第一个字符是数字而不是
cval = cval.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
cval = cval.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
// cval = cval.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
cval = cval.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
console.log('cval',cval)
//setTimeout 目的为了更新显示的input框里的值
this.$emit('input', '');
setTimeout(()=>{
this.$emit('input', cval);
},0)
}
直接设置 this.emit(′input′,cval);的时候,获取到的值是已经过滤了,但是在input输入框里还保留着不符合规则的值,所以在这之前要先 this.emit(‘input’, ‘’) 将原来的值设为空值,再进行复制。
我理解的是:因为直接复制,组件没有检测到数据有变化,所以不会去更新input里显示的值。