自定义指令可以方便的复用一些需要操作 DOM 的逻辑
创建一个 directives 文件夹,用来存放自定义指令,目录结构如下:
1 2
| ├── index.ts └── permission.ts
|
permission.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| 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 中注册自定义指令
1 2 3 4 5 6 7 8 9 10 11 12 13
| 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()
|
在页面中使用
1 2 3 4 5 6 7 8 9 10
| <script setup lang="ts"></script>
<template> <div> <button v-permission="['read1']">hidden</button> <button v-permission="['read']">block</button> </div> </template>
<style scoped></style>
|