vue3.0全局注册自定义指令-页面按钮权限管理

最新推荐文章于 2025-09-20 00:42:53 发布

原创

最新推荐文章于 2025-09-20 00:42:53 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

博客展示了Vue3.0自定义指令相关内容，包含效果示例图，给出了权限数组示例，还展示了在main.js中注册全局自定义指令的代码示例、页面使用案例，以及介绍了Vue3.0自定义指令钩子。

全局注册自定义指令-页面按钮权限管理

效果示例图

let permissionArray = [‘delete’, ‘update’];
在这里插入图片描述
let permissionArray = [‘delete’];

在这里插入图片描述
let permissionArray = [ ‘update’];

在这里插入图片描述

代码示例

main.js注册全局自定义指令

import {
	createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App);

//自定义指令
app.directive('permission', {
	mounted(el, binding) {
		//判断当前角色权限数组中是否包含该按钮设置的权限标志
		let permissionArray = ['delete', 'update'];
		if (!permissionArray.includes(binding.value[0])) {
			//不存在，删除当前元素标签
			el.parentNode