用Vue 3.0 组合式API 写一个动态控制权限的“自定义指令”

在网上找了一圈，一直没找到能够动态控制按钮权限的自定义指令，所以今天自己写了一个。

下面这里是Ts的代码部分，使用的是Vue3.0组合式API的写法。

<script lang="ts" setup>
  import { ref } from 'vue';
  const permission = ref('code01');
  interface Binding {
    value: string;
    dir: {
      initNode: (arg0: HTMLElement, arg1: any) => void;
      parentNode:
      | ParentNode
      | { removeChild: (arg0: HTMLElement) => void; appendChild: (arg0: HTMLElement) => void }
      | null;
    };
  }
  
  // 注意自定义指令必须以 v 开头 以驼峰方式。
  const vPermission = {
    parentNode: null,
    initNode(el: HTMLElement, binding: Binding) {
      // 权限code列表
      binding.dir.parentNode!.appendChild(el);
      const permissions = ['code01', 'code02', 'code03'];
      // 此处只校验单个权限，需要校验多个权限可以自己进行拓展
      if (!permissions.includes(binding.value)) {
        binding.dir.parentNode!.removeChild(el);
      }
    },
    mounted(el: HTMLElement, binding: Binding) {
      binding.dir.parentNode = el.parentNode;
      binding.dir.initNode(el, binding);
    },
    updated(el: HTMLElement, binding: Binding) {
      binding.dir.initNode(el, binding);
    }
  };
</script>Ï

下面这里是HTML的代码部分。

<div>
      <button v-permission="permission" @click="permission = 'code05'">测试自定义指令</button>
</div>
<button @click="permission = 'code01'">变更指令参数</button>Ï