Vue3 批量注册自定义指令

Vue3 批量注册自定义指令

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

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

permission.ts

index.ts

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 中注册自定义指令

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 权限指令
二叉树

评论区

评论加载中...