vue3 + ts + vite,自定义指令，使用权限全局控制按钮显示隐藏

1. 创建自定义指令

在 index.ts 文件中创建自定义指令。这个指令将根据用户权限控制按钮的显示和隐藏。

import { Directive } from 'vue';

const hasPermissionDirective: Directive = {
  mounted(el, binding) {
    const userPermissions: string[] = ['edit', 'delete', 'edit1']; // 模拟用户权限

    const permission = binding.value as string;
    if (!userPermissions.includes(permission)) {
      el.style.display = 'none';
    }
  },
};

export default hasPermissionDirective;

2. 在 main.ts 中全局注册指令

在 main.ts 文件中全局注册自定义指令。

import { createApp } from 'vue';
import App from './App.vue';
import hasPermissionDirective from './index.ts';

const app = createApp(App);

app.directive('hasPermi', hasPermissionDirective);

app.mount('#app');

3. 在其他页面使用指令

在其他页面的模板中，使用 v-hasPermi 指令来控制按钮的显示和隐藏。例如：

<template>
  <button v-hasPermi="'edit1'">Edit</button>
</template>