如何做按钮级用户权限建立自定义命令

<template>
  <div>
    <button v-permission="'edit'" @click="handleEdit">编辑</button>
    <button v-permission="'delete'" @click="handleDelete">删除</button>
  </div>
</template>

<script>
import { DirectiveBinding, App } from 'vue';

// 自定义指令
const permissionDirective = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    // 获取用户权限信息，可以从后端获取或通过其他方式传递给前端
    const userPermissions = ['edit', 'delete'];

    // 获取按钮权限
    const buttonPermission = binding.value;

    // 判断用户是否有权限
    if (!userPermissions.includes(buttonPermission)) {
      el.style.display = 'none'; // 隐藏按钮
    }
  },
};

export default {
  methods: {
    handleEdit() {
      // 处理编辑按钮点击事件
      // 只有具有 'edit' 权限的用户才能执行此操作
    },
    handleDelete() {
      // 处理删除按钮点击事件
      // 只有具有 'delete' 权限的用户才能执行此操作
    },
  },
  mounted() {
    // 注册自定义指令
    const app: App = this.$app;
    app.directive('permission', permissionDirective);
  },
};
</script>

在上述示例中，我们使用了 v-permission 自定义指令来控制按钮的显示和隐藏。指令通过比较用户的权限与按钮所需的权限，决定按钮是否应该显示。具体实现步骤如下：

1. 在 <script> 部分导入必要的 Vue3 相关对象，包括 DirectiveBinding 和 App。

2. 创建一个自定义指令对象 permissionDirective，其中的 mounted 钩子函数会在指令绑定的元素插入 DOM 时触发。

3. 在 mounted 钩子函数中，你可以获取用户权限信息（例如从后端获取），并根据权限判断按钮的显示状态。如果用户没有权限，通过设置元素的 display 样式为 'none' 来隐藏按钮。

4. 在 Vue3 组件的 mounted 钩子函数中注册自定义指令。通过 this.$app.directive 方法将自定义指令注册到全局，以便在模板中使用。

这样，在模板中使用 <button v-permission="'edit'"> 和 <button v-permission="'delete'"> 的方式，将根据用户的权限动态显示或隐藏按钮。

请确保将代码适配到你的项目中，以便与你的 PHP 后端进行集成。根据你的实际情况，可能需要调整获取用户权限信息的方式。