Vue实用自定义指令介绍

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

前言

测试：”XXX!!! 你的这个表单提交为什么又报错了。“
我：”等等，我马上看一下，我明明就测过了，表单提交是没有问题的，你是不又传什么非法数据了？“
测试：”没有，我都是按照要求传的。“
我：”你先别慌提。。。“
测试：”我已经提BUG了，你慢慢看吧。“
我：”。。。“
最后检查发现是测试提交的时候连点了两次提交，后端做了重复验证，所以第二次提交报错了。
不知道有没有人和我遇到过同样的问题，其实也不是什么严重的问题，就是写代码的时候没有对提交按钮做防重点击。理论上这种问题是需要前后端同时处理是最好的，仅仅是前端做防重点击是没什么用的，一个遍历请求接口就直接挂了，但是测试一般不管这些问题，直接就是一个Bug呼前端脸上。没办法，谁让前端地位低呢，页面上可见的Bug，不管三七二十一，先提给前端准没有错。

方案一 防抖(v-debounce)

其实解决方法很简单，直接自定义一个v-debounce指令，在需要使用的地方将@click改为v-debounce即可。
首先我们来实现一个简单的debounce函数：

function debounce(el, binding) { // el表示触发事件元素，binding为传入的事件
  let timer;
  el.addEventListener("click", () => {  // 自定义指令定义的函数返回的必须为一个函数 ，不然无法执行
    if (timer) {  // 如果定时器存在先清除计时器，重新开始计时
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      // 关键点：vue的自定义指令传递的参数binding如果是一个函数，则通过binding.value()来执行
      binding.value();
      clearTimeout(timer); // 这一步也可以不用
    }, 500);
  });
}

再新建一个debounce.js文件,引入debounce函数：

// debounce.js
export default {
  mounted(el, binding) { // 将指令挂载到元素上
    debounce(el, binding);
  }
};

最后在mian.js中使用app.directive('debounce',debounce) 注册指令就可以了。

方案二 禁止点击(v-disabled)

测试不是喜欢连续点击吗？那就直接在点击之后把按钮禁用，过个一段时间再把按钮的点击放开。实现方法和v-debounce差不多，这里只贴出禁止按钮实现函数。

function btnDisabled (el,binding){
  el.addEventListener("click", (event) => {
    if (![...el.classList].includes("vDisabled")) {
      el.disabled = true;
      el.classList.add("vDisabled", "not");
      el.setAttribute("disabled", "disabled");
      event.preventDefault();
      event.stopPropagation();
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove("vDisabled", "not");
      }, binding.value || 1500); // 这里其实是一个骚操作，其实可以等后端返回数据之后 再改按钮状态
    }
  });
}

权限控制(v-permission)

工作中其实常遇到一些系统权限需要精确到按钮，其实最简单的方法就是在每个按钮上加v-if，只是加多了看起来不好看，我们完全可以自定义一个指令，传入有权限的角色即可。

function checkPermission(el, binding) {
  const { value } = binding
  const roles = store.state?.user?.roles  // 获取后端返回的用户角色
  if (value && value instanceof Array) {
    if (value.length > 0) {
      const permissionRoles = value

      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role) // 判断用户是否有相应权限
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  } else {
    throw new Error(`need roles! Like v-permission="['admin','editor']"`)
  }
}
export default {
  mounted(el, binding) {
    checkPermission(el, binding);
  },
  beforeUpdate(el, binding) {
    checkPermission(el, binding)

  }
}

再将指令在main.js注册即可使用。
以上就是今天Vue使用指令的介绍，喜欢就点个赞吧。