vue和directive全局自定义指定控制元素的显示和隐藏

创建src\directive\auth\index.js文件

import store from '@/store'
 
const auth= {
 inserted(el,binding,vnode,oldVnode){
		let user = window.sessionStorage.getItem('user')
		user = user ? JSON.parse(user) : {}
		// 如果角色为管理员就不验证
		if(!user.super){
			let rules = user.ruleNames ? user.ruleNames : []
			
			let v = rules.find(item=> item === binding.value)
			if(!v){
                //移除元素
				el.parentNode.removeChild(el)
			}
		}
	}
}
 
auth.install = function(Vue) {
//定义指令名
  Vue.directive('auth', auth)
}
 
export default auth

main.js引入

import auth from '@/directive/auth'
 Vue.use(auth)

页面使用

<div class="d-flex align-items-center">
		<el-button type="primary" size="mini" v-auth="'添加角色'" @click="openDialog('role')">添加角色</el-button>
	</div>