vue3 按钮权限 自定义指令代码

在 Vue3 中，实现按钮权限可以使用自定义指令。以下是一个简单的示例：

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

import { Directive } from 'vue';

// 定义自定义指令
const hasPermissionDirective: Directive = {
  mounted(el, binding) {
    // 获取权限值
    const permission = binding.value;
    // 判断是否有权限
    if (!hasPermission(permission)) {
      // 没有权限则禁用按钮
      el.setAttribute('disabled', 'disabled');
      el.style.opacity = '0.5';
    }
  },
};

// 判断是否有权限的函数
function hasPermission(permission: string) {
  // 判断当前用户是否有权限
  // 如果有权限返回 true，否则返回 false
  return true;
}

export default hasPermissionDirective;

在上面的示例中，我们定义了一个名为 `v-has-permission` 的自定义指令，并在按钮元素上使用该指令，并传入权限值。在指令的 `mounted` 钩子函数中，我们获取了传入的权限值，并调用 `hasPermission` 函数判断当前用户是否有该权限。如果当前用户没有该权限，我们就禁用按钮，并将按钮的透明度设置为 0.5。

需要注意的是，我们在上面的示例中使用了 TypeScript。如果你不使用 TypeScript，可以将类型相关的代码删除。