[{"data":1,"prerenderedAt":125},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fvue3-permission-directive":3,"surround:\u002Fposts\u002F2024\u002Fvue3-permission-directive":114},{"id":4,"title":5,"body":6,"canonical":84,"categories":85,"date":87,"description":88,"draft":89,"extension":90,"image":91,"meta":92,"navigation":100,"path":101,"permalink":84,"readingTime":102,"recommend":84,"references":84,"seo":107,"sitemap":108,"stem":111,"tags":112,"type":84,"updated":87,"__hash__":113},"content\u002Fposts\u002F2024\u002Fvue3-permission-directive.md","Vue3 权限指令",{"type":7,"value":8,"toc":76},"minimark",[9,21,25,28,39,43,46,52,55,58,66,69],[10,11,12,13,20],"p",{},"自定义一个权限指令来动态显示、隐藏， 详细代码可查看",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fsable",[18],"nofollow","sable","。这里只列出了主要的代码",[22,23,24],"h2",{"id":24},"自定义权限指令",[10,26,27],{},"permission.ts",[29,30,36],"pre",{"className":31,"code":33,"language":34,"meta":35},[32],"language-ts","import type { App } from \"vue\"\n\nimport { storeToRefs } from \"pinia\"\nimport { ref, watchEffect } from \"vue\"\n\nimport { usePermissionStore } from \"@\u002Fstore\u002FusePermissionStore.ts\"\n\n\u002F\u002F 按钮权限\nexport function registerPermission(app: App) {\n    const { permissions } = storeToRefs(usePermissionStore())\n\n    app.directive(\"permission\", {\n        created(el: HTMLButtonElement, binding) {\n            const { value } = binding\n\n            const buttonPermission = Array.isArray(value) ? value : [value]\n            const visible = ref(false)\n\n            watchEffect(() => {\n                visible.value = hasIntersection(permissions, buttonPermission)\n                el.style.display = visible.value ? \"\" : \"none\"\n            })\n        },\n    })\n}\n\nfunction hasIntersection(permissions: Ref\u003Cstring[]>, arr2: string[]) {\n    const map = new Map()\n    permissions.value.forEach(item => map.set(item, true))\n    return arr2.some(item => map.get(item))\n}\n","ts","",[37,38,33],"code",{"__ignoreMap":35},[22,40,42],{"id":41},"权限-store","权限 store",[10,44,45],{},"usePermissionStore.ts",[29,47,50],{"className":48,"code":49,"language":34,"meta":35},[32],"import { defineStore } from \"pinia\"\n\nexport const usePermissionStore = defineStore(\"permission\", {\n    state: () => ({\n        permissions: [],\n    }),\n    getters: {},\n    actions: {\n        setPermissions(permissions: string[]) {\n            this.permissions = permissions\n        },\n    },\n})\n",[37,51,49],{"__ignoreMap":35},[22,53,54],{"id":54},"使用",[10,56,57],{},"permission.vue",[29,59,64],{"className":60,"code":62,"language":63,"meta":35},[61],"language-html","\u003Cscript lang=\"ts\" setup>\n  import { storeToRefs } from \"pinia\"\n\n  const userPermissionStore = usePermissionStore()\n  const { setPermissions } = userPermissionStore\n  const { permissions } = storeToRefs(userPermissionStore)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    自定义指令\n\n    \u003Cn-divider title-placement=\"left\"> 根据权限列表来展示 \u003C\u002Fn-divider>\n    \u003Cdiv>\n      \u003Cn-space>\n        \u003Cn-button @click=\"setPermissions(['read'])\"> 设置为只有阅读权限 \u003C\u002Fn-button>\n        \u003Cn-button @click=\"setPermissions(['read', 'write'])\"> 设置为阅读和修改权限 \u003C\u002Fn-button>\n      \u003C\u002Fn-space>\n    \u003C\u002Fdiv>\n    \u003Cdiv mt-4>\n      权限列表： {{ permissions }}\n      \u003Cn-button v-permission=\"'read'\"> 阅读 \u003C\u002Fn-button>\n      \u003Cn-button v-permission=\"'write'\"> 写入 \u003C\u002Fn-button>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\u003C\u002Fstyle>\n","html",[37,65,62],{"__ignoreMap":35},[22,67,68],{"id":68},"效果",[10,70,71],{},[72,73],"img",{"alt":74,"src":75},"vue permission","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679adb031eb3b-78.gif",{"title":35,"searchDepth":77,"depth":77,"links":78},4,[79,81,82,83],{"id":24,"depth":80,"text":24},2,{"id":41,"depth":80,"text":42},{"id":54,"depth":80,"text":54},{"id":68,"depth":80,"text":68},null,[86],"代码","2024-03-09 23:23:27","自定义一个权限指令来动态显示、隐藏， 详细代码可查看https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fsable。这里只列出了主要的代码",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad72e4f05d-78.webp",{"excerpt":93},{"type":7,"value":94},[95],[10,96,12,97,20],{},[14,98,19],{"href":16,"rel":99},[18],true,"\u002Fposts\u002F2024\u002Fvue3-permission-directive",{"text":103,"minutes":104,"time":105,"words":106},"2 min read",1.405,84300,281,{"title":5,"description":88},{"loc":101,"images":109},[110],{"loc":75},"posts\u002F2024\u002Fvue3-permission-directive",[],"30bsz3iJxgQw0Xs7-Ek5JSTF6rjPXGqMOxoTPRePxwI",[115,120],{"title":116,"path":117,"stem":118,"date":119,"type":84,"children":-1},"Vue3 批量注册自定义指令","\u002Fposts\u002F2024\u002Fvue3-batch-registers-custom-directive","posts\u002F2024\u002Fvue3-batch-registers-custom-directive","2024-03-07 20:23:27",{"title":121,"path":122,"stem":123,"date":124,"type":84,"children":-1},"浅尝histoire","\u002Fposts\u002F2024\u002Fhistoire-setup","posts\u002F2024\u002Fhistoire-setup","2024-03-14 20:08:00",1789642592656]