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

1.directive.ts

const permissions = JSON.parse(localStorage.getItem('permissionId') || '[]')
// 自定义指令-----功能权限
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>