指令封装代码：

import type { App } from "vue";const content ={mounted(el : any, binding : any) {console.dir(binding.value);el.remove();}
};const operate = {mounted(el : any, binding : any) {console.dir(binding.value);el.remove();}
};const directives : any = {content,operate
}/*
*  指令的完整生命周期// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {}
* */export function setDirective( app : App<Element>) {Object.keys(directives).forEach( (key: string) => {app.directive(key, directives[key])})
}

全局挂载：

import { setDirective } from '@/utils/PowerAuth'
const app = createApp(App);
setDirective(app);

指令使用：

<template><div><div v-content>需要权限</div><div>无需权限</div></div>
</template>

 效果

提示：页面直接在元素上像使用v-if那样v-xxx即可