Vue3利用自定义指令进行内容控制的实现方法

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.directive('permission', {mounted(el, binding) {
// 指令第一次绑定到元素时调用
// 这里将会填充权限判断逻辑
  }
})
app.mount('#app')

 // auth.js
export const userPermissions = ["model:info:add","model:info:delete"];

import { createApp } from "vue";
import App from "./App.vue";
import { userPermissions } from "./auth";
const app = createApp(App);
app.directive("permission", {
  mounted(el, binding) {
    const { value } = binding;
    if (value && !userPermissions.includes(value)) {
      el.parentNode.removeChild(el);
    }
  },
});
app.mount("#app");

<template>
  <button v-permission="'model:info:add'"添加模型</button
</template>

app.directive("permission", {
  mounted(el, binding) {
    const { value, arg, modifiers } = binding;
    let hasPermission = true;
    if (typeof value === "string") {
      hasPermission = userPermissions.includes(value);
    } else if (typeof value === "function") {
      hasPermission = value(userPermissions);
    }
    if (!hasPermission) {
      if (modifiers.remove) {
        el.parentNode.removeChild(el);
      } else {
        el.style.display = "none";
      }
    }
  },
});