Vue3+TS封装自定义权限按钮指令

在Vue 3和TypeScript中封装一个自定义权限按钮指令，可以通过定义一个指令函数来实现。以下是一个简化的示例：

import { DirectiveBinding } from 'vue';
 
// 权限检查函数，这里仅作为示例，实际应用中需要根据权限规则进行判断
function checkPermission(permission: string): boolean {
  // 假设有一个权限列表，用户拥有的权限存储在一个数组中
  const userPermissions = ['edit', 'delete'];
  return userPermissions.includes(permission);
}
 
// 自定义指令
const vPermission = {
  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
    // 获取指令的值，即权限名称
    const { value } = binding;
    if (value && !checkPermission(value)) {
      // 如果用户没有该权限，隐藏元素
      el.style.display = 'none';
    }
  },
  // 如果需要在权限变化时更新显示状态，可以在更新钩子中实现逻辑
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding;
    if (value && !checkPermission(value)) {
      el.style.display = 'none';
    } else {
      el.style.display = '';
    }
  }
};
 
export default vPermission;

在Vue组件中使用这个自定义指令：

<template>
  <button v-permission="'edit'">编辑</button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import vPermission from './path/to/v-permission';
 
export default defineComponent({
  directives: {
    permission: vPermission
  }
});
</script>

这个示例中，v-permission指令通过检查用户权限来决定是否隐藏按钮。在实际应用中，权限检查逻辑会更复杂，可能涉及到调用后端API或者从Vuex store中获取状态。这个示例提供了一个简单的权限检查函数和一个基本的指令实现，可以根据具体需求进行扩展和优化。