Vue3自定义全局指令批量注册

大阳光男孩2024-02-21 13:15

指令封装代码：

TypeScript 复制代码

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])
    })
}

全局挂载：

TypeScript 复制代码

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

指令使用：

html 复制代码

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

效果

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