Vue自定义指令(表单验证、权限验证、函数接口、图片优化加载)

指令的注册方式分为两种：一是全局注册，二是局部注册

注册全局自定义指令
// 指令'v-focus'
Vue.directive('focus', {
inserted: function(el) {
el.focus())
}
})

注册局部指令
directives: {
focus: {
inserted: function(el) {
el.focus()
}
}
}

使用指令
注意：在定义的时候，指令的名称前面不需要加 v- 前缀，在调用的时候，必须在指定的名称前加上 v-前缀来进行调用

自定义指令的钩子函数
{
bind: function () {}, // 指令第一次绑定到元素时调用(仅初始化时调用一次)
inserted: function () {}, // 元素插入节点时调用
update: function () {}, // 当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发
componentUpdated: function () {}, // 组件与子组件更新时调用(当 update() 执行完毕之后触发)
unbind: function () {} // 指令与元素解绑时调用,只调用一次
}
---------注意------------
1.除 update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数
2.在每个函数中，第一个参数永远是 el， 表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 JS 对象，所以 Vue 自定义指令可以用来直接和 DOM 打交道
3.binding 是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers
4.oldVnode 只有在 update 与 componentUpdated 钩子中生效
5.除了 el 之外，binding、vnode 属性都是只读的

钩子函数中的参数：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：{
name：指令名
value：指令的绑定值
oldValue：指令绑定的前一个值
expression：字符串形式的指令表达式
arg：传给指令的参数，多用于动态参数
modifiers：一个包含修饰符的对象，如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
}
vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value"

函数简写
如果想在 bind 和 update 时触发相同行为，而不关心其它的钩子，可以这样写:
// 全局
Vue.directive('focus', function (el, binding) {
})

// 局部
directives: {
focus: (el, binding) => {
}
}

优化图片加载：
Vue.directive('imgUrl', function (el, binding) {
el.style.backgroundColor = '#F5F5F5'
let img = new Image()
img.src = binding.value
img.onload = function () {
el.style.backgroundColor = ''
el.src = binding.value
}
})

函数节流：
Vue.directive('debounce', {
inserted: function (el, binding) {
let timer
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value() // 调用绑定的函数
}, 300)
})
}
})

权限：
const authList = ['add', 'del', 'update', 'read' ]
Vue.directive('auth', {
inserted(el, binding) {
const isAuth = authList.some(item => binding.value.includes(item))
if (!isAuth) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})

表单验证：

// 全局注册指令
Vue.directive('validate', {
inserted: function (el, validateStr) {
// 验证规则拆分为数组
let validateRuleArr = validateStr.value.split("|");
// 监听元素失去焦点，进行验证
el.addEventListener('blur', function () {
validateFun();
});

// 循环进行验证
function validateFun() {
  for (let i = 0; i < validateRuleArr.length; ++i) {
    let requiredRegex = /^required$/; // 判断required
    let emailRegex = /^email$/; // 判断email
    let phoneRegex = /^phone$/; // 判断phone
    let minRegex = /min\(/; // 判断min最小值
    let maxRegex = /max\(/; // 判断max最大值
    let minlengthRegex = /minlength\(/; // 判断minlength最大长度
    let maxlengthRegex = /maxlength\(/; // 判断maxlength最大长度
    let regexRegex = /regex\(/;
    // 判断required
    if (requiredRegex.test(validateRuleArr[i])) {
      if (!required()) {
        break;
      }
    }

    // 判断email
    if (emailRegex.test(validateRuleArr[i])) {
      if (!email()) {
        break;
      }
    }

    // 判断 phone
    if (phoneRegex.test(validateRuleArr[i])) {
      if (!phone()) {
        break;
      }
    }

    // 判断是否最小值
    if (minRegex.test(validateRuleArr[i])) {
      if (!eval(validateRuleArr[i])) {
        break;
      }

    }

    // 判断是否最大值
    if (maxRegex.test(validateRuleArr[i])) {
      if (!eval(validateRuleArr[i])) {
        break;
      }
    }

    // 判断最小长度
    if (minlengthRegex.test(validateRuleArr[i])) {
      if (!eval(validateRuleArr[i])) {
        break;
      }
    }

    // 判断最大长度
    if (maxlengthRegex.test(validateRuleArr[i])) {
      if (!eval(validateRuleArr[i])) {
        break;
      }
    }

    // 判断测试正则表达式
    if (regexRegex.test(validateRuleArr[i])) {
      if (!eval(validateRuleArr[i])) {
        break;
      }
    }
  }
}

// 验证是否是必填项
function required() {
  if (el.value === '' || el.value === null) {
    showMsg("不能为空");
    return false;
  }
  return true;
}

// 验证是否是邮箱
function email() {
  let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
  if (!emailRule.test(el.value)) {
    showMsg("请输入正确的邮箱地址");
    return false;
  }
  return true;
}

// 验证是否是手机号码
function phone() {
  let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
  if (!phoneRule.test(el.value)) {
    showMsg("请输入正确的手机号码");
    return false;
  }
  return true;
}

// 最小值验证
function min(num) {
  if (el.value < num) {
    showMsg("最小值不能小于" + num);
    return false;
  }
  return true;
}

// 最大值验证
function max(num) {
  if (el.value > num) {
    showMsg("最大值不能大于" + num);
    return false;
  }
  return true;
}

// 最小长度验证
function minlength(length) {
  if (el.value.length < length) {
    showMsg("最小长度不能小于" + length);
    return false;
  }
  return true;
}

// 最大长度进行验证
function maxlength(length) {
  if (el.value.length > length) {
    showMsg("最大长度不能大于" + length);
    return false;
  }
  return true;
}

// 进行正则表达式的验证
function regex(rules) {
  if (!rules.test(el.value)) {
    showMsg("请输入正确的格式");
    return false;
  }
  return true;
}

// 提示信息
function showMsg(msg) {
  Message.error({
    message: msg
  })
}

}
})