创建一个 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()
在页面中使用
<script setup lang="ts"></script>
<template>
<div>
<button v-permission="['read1']">
hidden
</button>
<button v-permission="['read']">
block
</button>
</div>
</template>
评论区
评论加载中...