vue 自定义指令控制按钮权限

需求描述

• 用户登录获取菜单、按钮、接口权限
• 页面上的按钮根据用户权限展示不同的样式（颜色、显示隐藏等）

实例解析

创建自定义指令

• directive / btn-right / btnRight.js

// 自定义指令函数
export default {
	inserted(el, domVal, node) {
		console.log('el', el);
		console.log('domVal', domVal);
		console.log('node', node);
		// 按钮鉴定权限--在用户登录时获取，可以通过 store、storage 等方法存储，这里取值
		let systemPower = [
			'add', 'del', 'edit'
		];
		let flag = 0;
		let reg = domVal.expression.split("'").join(""); // 清除传值前后的引号
		systemPower.map((item0, index0) => {
			if (reg == item0) {
				// 当前标签传入内容在权限列表中
				flag += 1
			}
		});
		if (flag == 0) {
			// 当前按钮没有权限
			el.classList.add("noBtnRight")
		} else {
			// 当前按钮有权限
			el.classList.remove("noBtnRight")
		}
	}
}

• directive / btn-right / index.js

// 暴露到全局
import btnRight from './btnRight'
const install = Vue => {
  Vue.directive('btnRight', btnRight)
}
if (window.Vue) {
  window['btnRight'] = btnRight
  Vue.use(install);
}

btnRight.install = install
export default btnRight

• main.js

import btnRight from './directive/btn-right'; 
Vue.use(btnRight); 

应用到标签

<div
  class="linkJump"
  v-btnRight="'add'"
  @click="goToActDetail($event, scope.row)"
>
  普通活动
</div>

• 上图为 btnRight.js 的打印结果，可看出能够获取到标签 div、自定义指令的传值 ‘add’、标签节点
• 在 btnRight.js 中判断出，当前标签传递的 ‘add’ 在权限列表中，所以视为有权限，不添加 ‘noBtnRight’ 类名
  
• 如果修改自定义标签传值为 ‘click’，去权限列表中查找，没有权限，则会添加上特殊类名 ‘noRight’
  
  
• 使用特殊类名就可以对无权限的元素进行操作，例如添加颜色、隐藏、禁止点击等

goToActDetail(e, item) {
  if (e.target.classList.contains("noBtnRight")) {
  // 没有权限
  } else {
  // 有权限
  }
},