什么是vue自定义指令

• vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外vue 还允许开发者自定义指令。

• vue 中的自定义指令分为两类，分别是：

• 
  ⚫ 私有自定义指令
  ⚫ 全局自定义指令

directive目录下index.js

import store from "@/store";

const focus = (app) => {
  app.directive("focus", {
    mounted(el) {
      el.focus();
    },
  });
};

const permission = (app) => {
  app.directive("permission", {
    mounted(el, binding) {
      const { value } = binding;
      const permissions = store.getters.permissions;
      if (value) {
        const hasPermission = permissions.some(
          (permission) => permission == value        );
        if (!hasPermission) {
          el.parentNode && el.parentNode.removeChild(el);
        }
      } else {
        throw new Error("需要指定权限");
      }
    },
  });
 };
 
 const debounce = (app) => {
  app.directive("debounce", {
    mounted(el, binding) {
      try {
        let fn,
          event = "click",
          time = 500;
        if (typeof binding.value == "function") {
          fn = binding.value;
        } else {
          [fn, event, time] = binding.value;
        }

        let timer;
        el.addEventListener(event, () => {
          timer && clearTimeout(timer);
          timer = setTimeout(() => fn(), time);
        });
      } catch (error) {
        console.log("防抖指令错误", error);
      }
    },
  });
};
 
const throttle = (app) => {
  app.directive("throttle", {
    mounted(el, binding) {
      try {
        let fn,
          event = "click",
          time = 1500;

        if (typeof binding.value == "function") {
          fn = binding.value;
        } else {
          [fn, event, time] = binding.value;
        }
        /**
         * el.preTime 记录上次触发的时间
         * 每次触发比较nowTime（当前时间） 和 el.preTime 的差是否大于指定的时间段！
         */
        el.addEventListener(event, () => {
          const nowTime = new Date().getTime();
          if (!el.preTime || nowTime - el.preTime > time) {
            console.log(
              !el.preTime,
              nowTime - el.preTime,
              nowTime - el.preTime > time            );
            el.preTime = nowTime;
            fn();
          }
        });
      } catch (error) {
        console.log("节流指令错误", error);
      }
    },
  });
};

export default (app) => {
  focus(app);
  permission(app);
  debounce(app);
  throttle(app);
};

main.js全局定义directive

...
import { createApp } from "vue";
import App from "@/App.vue";
import router from "@/router";
import store from "@/store";
import defineDirectives from "@/directive/index";

...
const app = createApp(App);
defineDirectives(app);
app.use(router).use(store).mount("#app");

在组件中使用：

<template>
  <div v-permission="admin">admin</div>
  <div v-permission="user">user</div>
  <input type="text" v-focus />
</template>

<script>
import { reactive, toRefs } from "vue"
export default {
  setup() {
    const permission = reactive({
      admin: "admin",
      user: "user"
    })
    return {
      ...toRefs(permission)
    }     
  }
}
</script>