在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

指令定义函数提供了几个钩子函数（可选）

1. bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
2. inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
3. update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
4. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
5. unbind: 只调用一次， 指令与元素解绑时调用。

当我们拥有多个指令时，可以引入其他指令统一管理；

 
123456789101112
import type { App } from 'vue';
import { authDirective } from '/@/utils/authDirective';
import { wavesDirective, dragDirective } from '/@/utils/customDirective';

export function directive(app: App) {
	// 用户权限指令
	authDirective(app);
	// 按钮波浪指令
	wavesDirective(app);
	// 自定义拖动指令
	dragDirective(app);
}

在一些需要判断权限显示按钮的业务场景下，也可以通过指令去控制DOM的显示与隐藏；

 
123456789101112131415161718192021222324252627
export function authDirective(app: App) {
	// 单个权限验证
	app.directive('auth', {
		mounted(el, binding) {
			if (!store.state.userInfos.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
		},
	});
	// 多个权限验证
	app.directive('auths', {
		mounted(el, binding) {
			let flag = false;
			store.state.userInfos.userInfos.authBtnList.map((val: string) => {
				binding.value.map((v: string) => {
					if (val === v) flag = true;
				});
			});
			if (!flag) el.parentNode.removeChild(el);
		},
	});
	// 多个权限验证，全部满足则显示
	app.directive('auth-all', {
		mounted(el, binding) {
			const flag = judementSameArr(binding.value, store.state.userInfos.userInfos.authBtnList);
			if (!flag) el.parentNode.removeChild(el);
		},
	});
}

一切准备妥当后，我们把指令挂载到全局
在 main.ts 文件中引入指令

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

这样我们就可以使用啦！