vue3 自定义指令的使用

官网解释：自定义指令 | Vue.js

辅助参考基本写法：超详细：在Vue3中实现自定义指令 - 掘金

作用：快速封装好是否需要展示的 dom元素、按钮权限，元素是否展示红点提示，数据埋点统计

模块化导入指令：

1、在src下新建文件（自定义名字）directives和对应的index.ts文档（后面用于暴露指令文件）

2、在文件directives 建立需要的自定义指令的 文件和对应的index.ts文档----->这里我建立文permission

3.在permission文件下的index.ts编写自定义指令代码,直接export暴露

/* 权限指令 */
import type { Directive } from "vue";
//permission  这是自定义名字
export const permission: Directive = {
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding) {
    // el 使用该指令的dom元素
    // binding 使用该指令传入的值，里面参数具体看官网 这里建议传数组，可以一起判断多个条件

    /* 下面可以根据  binding（传入的值控制元素的显示/隐藏）*/
    const { value } = binding;
    console.log("vue3自定义指令传入的参数", value);

    if (value && value instanceof Array && value.length > 0) {

    // 下面这根据具体业务编写代码

      const hasPermission = value.some((role: any) => {
        return ["a", "b", "c"].includes(role);
      });
      if (hasPermission) {
        el.style.display = "block"; //显示该元素
      } else {
        el.style.display = "none"; // 隐藏该元素
      }



    }
  },
};

4.在之前文件directives 建立的index.ts继续暴露指令文件，每个指令文件都放在这统一暴露

5、在main.ts文件下全局注入指令

下面是关键代码：

import { createApp, type Directive } from "vue";


import * as directives from "@/directives";


const app = createApp(App);

// 自定义指令
Object.keys(directives).forEach((key) => {
  app.directive(key, (directives as { [key: string]: Directive })[key]);
});

app.use(createPinia());
app.use(router);
app.use(vant);
app.use(i18n);
app.mount("#app");

6、在vue3使用自定义指令

控制台打印的：