【vue其他相关】积累几个实用的自定义指令，可直接复制粘贴

前言

vue3和vue2的自定义指令写法稍微优点不同，这里就优先记录vue3的，有2的版本代码也会贴出来。

官方使用手册

建议把这些自定义指令都放到全局上。

---

全局注册

首先专门一个目录存放自定义指令

单个指令功能导出写法：

汇总index写法：

不过这样的汇总每次写完一个指令都要手动引入和登记，可以利用require和正则去做自动化登记。

可以参考：组件的动态引入

---

按钮点击防抖

代码来源 前端面试宝典

const vDebounce = {
  created: (el, binding) => {
    let debounceTime = binding.value; // 防抖时间
    if (!debounceTime) { // 用户若不设置防抖时间，则默认1s
      debounceTime = 1000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, debounceTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
}

const search = () => {
  console.log('点击了');
}

<template>
  <div @click="search" v-debounce>
    搜索
  </div>
</template>

同理，输入框的change事件也可以按这个模仿写。

vue2：

Vue.directive('debounce', {
  bind: (el, binding) => {
    let debounceTime = binding.value; // 防抖时间
    if (!debounceTime) { // 用户若不设置防抖时间，则默认1s
      debounceTime = 1000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, debounceTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});

---

按钮权限显示

/* dom权限 （自定义指令的写法可以参考官网） */
import store from "@/store";

function checkPermission(el, binding) {
  // 获取绑定的值，此处为权限
  const { value } = binding;
  // 获取所有的功能指令
  const points = store.getters.userInfo.permission.points;
  // 当传入的指令集为数组时
  if (value && value instanceof Array) {
    // 匹配对应的指令
    const hasPermission = points.some((point) => {
      return value.includes(point);
    });
    // 如果无法匹配，则表示当前用户无该指令，那么删除对应的功能按钮
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  } else {
    // eslint-disabled-next-line
    throw new Error("v-permission value is [\"admin\",\"editor\"]");
  }
}

export default {
  // 在绑定元素的父组件被挂载后调用
  mounted(el, binding) {
    checkPermission(el, binding);
  },
  // 在包含组件的 VNode 及其子组件的 VNode 更新后调用
  update(el, binding) {
    checkPermission(el, binding);
  },
};

vue2的以后补充

---

未来继续补充