vue directive自定义指令封装输入框校验，按钮权限（解决v-model绑定失效问题和数字校验的中文问题）

学习总结：

因业务需求，Eelementui封装的表单校验不能满足需求，利用vue的自定义指令封装满足业务的输入框校验，按钮权限指令。实现过程遇坑解决记录记录。参考：https://cn.vuejs.org/v2/guide/custom-directive.html

---

问题描述：

1、修改输入框的值，并没有修改到v-model绑定的值
2、做了数字和字母校验后通过输入法可以输入中文

---

解决思路：

1、修改输入框的值，并没有修改到v-model绑定的值： vue中其实它通过解析，在@input事件中设置响应，在响应中修改text的值，然后再通过绑定属性v-bind绑定value同步value值。我是通过调用这个回调 vnode.data.model.callback()；网上有其他办法试了也可以实现：

其他实现方法

2、做了数字和字母校验后通过输入法可以输入中文： 通过compositionend和compositionstart事件判断是否处于。参考文章：

https://segmentfault.com/a/1190000009246058

---

实现代码：

一、只能输入三位0-9-a-z的字符串

---

// // 注册一个全局自定义指令 `v-name`
Vue.directive('name', {
   
  inserted(el, binding, vnode) {
     // 当被绑定的元素插入到 DOM 中时
  	let iscancel = false;
    const inputEvent = e => {
   
      if(iscancel){
   
      	return false;
      }
      let value = e.target.value;//为绑定的值
      let v=value;
      let pat=/^[0-9a-z]{
   0,}$/;
      if(!pat.test(value)){
   //输入0-9-a-z以外的字符被替换为空格 
        v=value.replace(value.charAt(value.length-1),'');
      }else if(value.length>3