需求:只能输入一个包含最多两位小数的数字,最小为0,最大为1
解决代码:
v-model.number="form.xxx"
placeholder=""
max="100"
min="0"
@input="editInput($event, form, 'xxx')"
oninput="if(value>100){value=100};if(value<0)value=0"
editInput($event, row, key) {
console.log($event); //
row[key] = ('' + $event)
.replace(/[^\d.]/g, '') //将非数字和点以外的字符替换成空
.replace(/^\./g, '') //验证第一个字符是数字而不是点
.replace(/\.{2,}/g, '.') //出现多个点时只保留第一个
.replace('.', '$#$') // 1、将数字的点替换成复杂字符$#$
.replace(/\./g, '') // 2、将字符串的点直接清掉
.replace('$#$', '.') // 3、将复杂字符再转换回点
.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
if (row[key].indexOf('.') < 0 && row[key] != '') {
row[key] = parseFloat(row[key]);
} else if (row[key].indexOf('.') > 1 && row[key][0] === '0') {
row[key] = parseFloat(row[key]);
}
},
总结:
尽量用el-input封装好的,刚开始我用的@input.native会出现可输入e的情况,并且event就是一个值,看了源码后发现了input的新的api compositionstart/onCompositionEnd/compositionupdate,在输入法输入中文的时候会触发这三个函数,在input函数之前触发