原生input 輸入框
<input type="text" v-moneynative="{num:4,couldNegative:true}" v-model="test">
新建一個(gè)vue.directive
該指令限制輸入框只能有指定位數(shù)的數(shù)字
input + blur
實(shí)時(shí)輸入實(shí)時(shí)驗(yàn)證改變值
// 這個(gè)也有缺陷
const moneynative = Vue.directive("moneynative",{
bind(el, binding) {
var defaultVal = {
num:2, //Number小數(shù)點(diǎn)位數(shù)
couldNegative:false, //負(fù)數(shù)？
}
let num = Object.assign(defaultVal,binding.value).num
let couldNegative = Object.assign(defaultVal,binding.value).couldNegative
el.handler = (e) => {
if(!e.target.value)return
let miusFont = (couldNegative && e.target.value.slice(0,1)== '-')?'-':''
let valueMiddle = e.target.value
valueMiddle = valueMiddle.toString().replace(/[^\d\.]/g, ''); //如果輸入非數(shù)字削茁，則替換為''
//必須保證第一個(gè)為數(shù)字而不是.
valueMiddle = valueMiddle.toString().replace(/^\./g,'');
//前兩位不能是0加數(shù)字
valueMiddle = valueMiddle.toString().replace(/^0\d[0-9]*/g,'');
//保證只有出現(xiàn)一個(gè).而沒有多個(gè).
valueMiddle = valueMiddle.toString().replace(/\.{2,}/g,'.');
//保證.只出現(xiàn)一次岁经，而不能出現(xiàn)兩次以上
valueMiddle = valueMiddle.toString().replace('.','$#$').replace(/\./g,'').replace('$#$','.');
//只能輸入兩位小數(shù) 或者多位
let str = Array.from({length:num}).reduce((total,item)=>{
return total+='\\d'
},'')
let part = `/^(\\-)*(\\d+)\\.(${str}).*$/`
valueMiddle = valueMiddle.toString().replace(eval(part),'$1$2.$3');
e.target.value = miusFont+valueMiddle
}
el.addEventListener("input", el.handler)
el.addEventListener("blur", el.handler)
},
unbind(el) {
el.removeEventListener('input', el.handler);
el.removeEventListener("blur", el.handler)
},
})
在輸入超出位數(shù)的時(shí)候
image.png
value雖然被改變了璧亮，但是 相應(yīng)的 v-model 老是多一位刚照。及時(shí)加了blur多觸發(fā)一次也不行
修改 change + blur + 額外觸發(fā)input
不能實(shí)施觸發(fā)了
el.dispatchEvent(new Event('input'));
e.target.value = miusFont+valueMiddle
el.dispatchEvent(new Event('input'));
}
el.addEventListener("change", el.handler)
el.addEventListener("blur", el.handler)
},
unbind(el) {
el.removeEventListener('change', el.handler);
el.removeEventListener("blur", el.handler)
},
可以實(shí)現(xiàn)需求
原理是根據(jù)v-model也是@input 完成和value的雙向綁定
<input v-model="name" type="text"/>
<input :value="name" @input="name = $event.target.value" type="text"/>
但是在el-element el-input 也有效
