VUE3 自定义指令 全局

Vue3中的自定义指令是一种特殊的方式，用于增强组件的功能，使其能够响应DOM元素的变化并执行相应的操作。全局注册自定义指令意味着在整个项目范围内都可以使用该指令，无需每次都通过`v-`前缀在每个组件上单独声明。

全局注册自定义指令的步骤如下：

1. 首先，在Vue实例创建之前，通常在`main.js`或其他应用启动文件里，需要导入Vue，并提供一个插件来配置全局指令。例如：

import { createApp } from 'vue';
import App from './App.vue';
import globalDirectives from './directives/global';

const app = createApp(App);
app.directive('custom-directive', globalDirectives); // 注册全局指令
app.mount('#app');

2. `globalDirectives`是一个对象，其中包含了你想作为全局指令使用的函数。每个属性名是指令的名称，值是一个返回函数的表达式，这个函数接受两个参数：el（目标元素）和 Binding（指令绑定的对象）：

export const globalDirectives = {
  customDirective: (el, binding) => {
    el.addEventListener('click', () => {
      console.log(`Custom directive called on element with value: ${binding.value}`);
    });
  }
};

在这个例子中，当页面上的元素触发`click`事件时，会打印出对应的指令绑定值。