vue自定义指令+修改v-model绑定的值

//环境: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事件,才能真正的达到效果
 

标签: Javascript

添加新评论