vue3创建自定义指令，实现权限控制

1.directive.ts

const permissions = ['open', 'add']
// 自定义指令-----功能权限
const auth = {
    mounted: (el: HTMLElement, binding: any) => {
        if (!permissions.includes(binding.arg)) {
            el.style.display = 'none'
        }
    }
}
const directive = {
    install: (app: any) => {
        app.directive('auth', auth)
    }
}
export default directive

2.main.ts

import App from './App.vue';
import directive from './directive';
import { createApp } from 'vue';

const app = createApp(App);
app.use(directive)
app.mount('#app');

3.使用方法

<template>
  <div v-auth:open>demo</div>
  <button v-auth:add @click="open">添加</button>
</template>