Vue3 批量注册自定义指令

创建一个 directives 文件夹，用来存放自定义指令，目录结构如下：

├── index.ts
└── permission.ts

permission.ts

import type { Directive } from "vue"
import { ref, watchEffect } from "vue"

function hasIntersection(arr1: any[], arr2: any[]) {
    const map = new Map()
    arr1.forEach(item => map.set(item, true))
    return arr2.some(item => map.get(item))
}
const userPermission = ["read"]

export default {
    created(el: HTMLButtonElement, binding) {
        const { value } = binding
        const buttonPermission = Array.isArray(value) ? value : [value]
        const visible = ref(false)

        watchEffect(() => {
            visible.value = hasIntersection(userPermission, buttonPermission)
            el.style.display = visible.value ? "" : "none"
        })
    },
} as Directive

index.ts

import type { App, Directive } from "vue"

import permission from "./permission"

const directives = {
    permission,
} as Record<string, Directive>

export default {
    install(app: App) {
        Object.keys(directives).forEach((key) => {
            console.log(key)
            app.directive(key, directives[key])
        })
    },
}

在 main.ts 中注册自定义指令

import { createApp } from "vue"
import App from "./App.vue"
import directives from "./directives"

function bootstrap() {
    const app = createApp(App)

    app.use(directives)

    app.mount("#app")
}

bootstrap()

在页面中使用

vue

<script setup lang="ts"></script>

<template>
    <div>
        <button v-permission="['read1']">
            hidden
        </button>
        <button v-permission="['read']">
            block
        </button>
    </div>
</template>

Vue3 批量注册自定义指令

评论区