vite配置-vue自定义指令 - vite - 前端 - 技术设计

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show ) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)，以下就通过自定义指令的方式实现按钮权限控制。
参考：Vue 官方文档 - 自定义指令

1. 自定义指令

	// src/directive/permission/index.ts

	import { useUserStoreHook } from '@/store/modules/user';
	import { Directive, DirectiveBinding } from 'vue';

	/**
	* 按钮权限
	*/
	export const hasPerm: Directive = {
	mounted(el: HTMLElement, binding: DirectiveBinding) {
	// 「超级管理员」拥有所有的按钮权限
	const { roles, perms } = useUserStoreHook();
	if (roles.includes('ROOT')) {
	return true;
	}
	// 「其他角色」按钮权限校验
	const { value } = binding;
	if (value) {
	const requiredPerms = value; // DOM 绑定需要的按钮权限标识

	const hasPerm = perms?.some(perm => {
	return requiredPerms.includes(perm);
	});

	if (!hasPerm) {
	el.parentNode && el.parentNode.removeChild(el);
	}
	} else {
	throw new Error(
	"need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
	);
	}
	}
	};

2. 全局注册自定义指令

	// src/directive/index.ts
	import type { App } from 'vue';
	import { hasPerm } from './permission';

	// 全局注册 directive 方法
	export function setupDirective(app: App<Element>) {
	// 使 v-hasPerm 在所有组件中都可用
	app.directive('hasPerm', hasPerm);
	}

	// src/main.ts
	import { setupDirective } from '@/directive';

	const app = createApp(App);
	// 全局注册自定义指令 (directive)
	setupDirective(app);

3. 组件使用自定义指令

	// src/views/system/user/index.vue
	<el-button v-hasPerm="['sys:user:add']">新增</el-button>
	<el-button v-hasPerm="['sys:user:delete']">删除</el-button>