//环境:vue+iview<br><br>//Alphabet.js import Vue from 'vue' ; Vue.directive( 'Alphabet' , { //自定义指令 inserted: function (e) { const el = e.querySelector( '.ivu-input' ); //获取控件 el.addEventListener( "input" , function (e) { //进行验证 checkedfun(el); }); el.addEventListener( "input" , function (e) { //进行验证 checkedfun(el); }); function checkedfun(el) { let reg = new RegExp( "^[A-Za-z0-9]*$" ); if (!reg.test(el.value)) { el.value = el.value.replace(/[^A-Za-z0-9]+/g, "" ); el.dispatchEvent( new Event( "input" )); //调用input事件使vue v-model绑定更新 } } |
如果没有写这句el.dispatchEvent(new Event("input")); 输入框是有值,但是data定义的变量是没有变化的。
为什么 el.dispatchEvent(new Event("input")) 可以改变呢?
原因是因为v-model就是一个语法糖
1
2 |
<Input v-Alphabet v-model= "testValue" ></Input><em id= "__mceDel" > <Input :value= "testValue" @input= "testValue=$event.target.value" ></Input> |
这两句的是一样的。
所以想要真正改变data里面定义的变量,就需要手动触发input事件,才能真正的达到效果