vue3 权限按钮管理 怎么封装 怎么调用 代码

权限按钮管理可以通过自定义指令来实现，在Vue3中也可以使用自定义指令来实现权限按钮的管理。下面是一个简单的封装示例：

<template>
  <button v-permission="permissionCode">按钮</button>
</template>

<script>
import { getCurrentInstance } from 'vue';

const hasPermission = (permissionCode) => {
  // 这里可以根据实际情况判断用户是否有权限
  const currentUser = getCurrentInstance().appContext.config.globalProperties.$currentUser;
  return currentUser.permissions.includes(permissionCode);
};

export default {
  mounted(el, binding) {
    const permissionCode = binding.value;
    if (!hasPermission(permissionCode)) {
      el.style.display = 'none';
    }
  },
};
</script>

上面的代码中，我们定义了一个 `v-permission` 指令，并在 `mounted` 钩子函数中判断用户是否有权限。如果没有权限，就将按钮的 `display` 样式设置为 `none`。在实际使用中，我们需要将当前用户的权限信息存储在全局变量中，然后在指令中获取并判断。

使用时，我们只需要在按钮上加上 `v-permission` 指令，并传入权限代码即可：

<template>
  <button v-permission="permissionCode">按钮</button>
</template>

<script>
import PermissionDirective from './PermissionDirective.vue';

export default {
  components: {
    PermissionDirective,
  },
  data() {
    return {
      permissionCode: 'button.edit',
    };
  },
};
</script>

上面的代码中，我们在组件中引入了 `PermissionDirective`，并将权限代码传入到 `permissionCode` 变量中。然后，在按钮上使用 `v-permission` 指令，并将 `permissionCode` 作为参数传入即可。