[{"data":1,"prerenderedAt":103},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fvue3-batch-registers-custom-directive":3,"surround:\u002Fposts\u002F2024\u002Fvue3-batch-registers-custom-directive":92},{"id":4,"title":5,"body":6,"canonical":67,"categories":68,"date":70,"description":71,"draft":72,"extension":73,"image":74,"meta":75,"navigation":76,"path":77,"permalink":67,"readingTime":78,"recommend":67,"references":83,"seo":87,"sitemap":88,"stem":89,"tags":90,"type":67,"updated":70,"__hash__":91},"content\u002Fposts\u002F2024\u002Fvue3-batch-registers-custom-directive.md","Vue3 批量注册自定义指令",{"type":7,"value":8,"toc":64},"minimark",[9,13,24,27,35,38,44,47,53,56],[10,11,12],"p",{},"创建一个 directives 文件夹，用来存放自定义指令，目录结构如下：",[14,15,20],"pre",{"className":16,"code":18,"language":19},[17],"language-text","├── index.ts\n└── permission.ts\n","text",[21,22,18],"code",{"__ignoreMap":23},"",[10,25,26],{},"permission.ts",[14,28,33],{"className":29,"code":31,"language":32,"meta":23},[30],"language-ts","import type { Directive } from \"vue\"\n\nimport { ref, watchEffect } from \"vue\"\n\nfunction hasIntersection(arr1: any[], arr2: any[]) {\n    const map = new Map()\n    arr1.forEach(item => map.set(item, true))\n    return arr2.some(item => map.get(item))\n}\nconst userPermission = [\"read\"]\n\nexport default {\n    created(el: HTMLButtonElement, binding) {\n        const { value } = binding\n        const buttonPermission = Array.isArray(value) ? value : [value]\n        const visible = ref(false)\n\n        watchEffect(() => {\n            visible.value = hasIntersection(userPermission, buttonPermission)\n            el.style.display = visible.value ? \"\" : \"none\"\n        })\n    },\n} as Directive\n","ts",[21,34,31],{"__ignoreMap":23},[10,36,37],{},"index.ts",[14,39,42],{"className":40,"code":41,"language":32,"meta":23},[30],"import type { App, Directive } from \"vue\"\n\nimport permission from \".\u002Fpermission\"\n\nconst directives = {\n    permission,\n} as Record\u003Cstring, Directive>\n\nexport default {\n    install(app: App) {\n        Object.keys(directives).forEach((key) => {\n            console.log(key)\n            app.directive(key, directives[key])\n        })\n    },\n}\n",[21,43,41],{"__ignoreMap":23},[10,45,46],{},"在 main.ts 中注册自定义指令",[14,48,51],{"className":49,"code":50,"language":32,"meta":23},[30],"import { createApp } from \"vue\"\n\nimport App from \".\u002FApp.vue\"\nimport directives from \".\u002Fdirectives\"\n\nfunction bootstrap() {\n    const app = createApp(App)\n\n    app.use(directives)\n\n    app.mount(\"#app\")\n}\n\nbootstrap()\n",[21,52,50],{"__ignoreMap":23},[10,54,55],{},"在页面中使用",[14,57,62],{"className":58,"code":60,"language":61,"meta":23},[59],"language-vue","\u003Cscript setup lang=\"ts\">\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cbutton v-permission=\"['read1']\">\n            hidden\n        \u003C\u002Fbutton>\n        \u003Cbutton v-permission=\"['read']\">\n            block\n        \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[21,63,60],{"__ignoreMap":23},{"title":23,"searchDepth":65,"depth":65,"links":66},4,[],null,[69],"代码","2024-03-07 20:23:27","自定义指令可以方便的复用一些需要操作 DOM 的逻辑",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fvue3-batch-registers-custom-directive.jpg",{},true,"\u002Fposts\u002F2024\u002Fvue3-batch-registers-custom-directive",{"text":79,"minutes":80,"time":81,"words":82},"1 min read",0.995,59700,199,[84],{"title":85,"link":86},"自定义指令","https:\u002F\u002Fcn.vuejs.org\u002Fguide\u002Freusability\u002Fcustom-directives.html",{"title":5,"description":71},{"loc":77},"posts\u002F2024\u002Fvue3-batch-registers-custom-directive",[],"s2mljWpz9I2jpE8iGRH-dd7b20-hlpKFCVcLBXKdCTQ",[93,98],{"title":94,"path":95,"stem":96,"date":97,"type":67,"children":-1},"二叉树","\u002Fposts\u002F2024\u002Falgorithm-traversal","posts\u002F2024\u002Falgorithm-Traversal","2024-02-17 16:35:14",{"title":99,"path":100,"stem":101,"date":102,"type":67,"children":-1},"Vue3 权限指令","\u002Fposts\u002F2024\u002Fvue3-permission-directive","posts\u002F2024\u002Fvue3-permission-directive","2024-03-09 23:23:27",1789642592751]