需求描述
用户登录获取菜单、按钮、接口权限页面上的按钮根据用户权限展示不同的样式（颜色、显示隐藏等）实例解析
创建自定义指令
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'] = btnRightVue.use(install);}btnRight.install = installexport default btnRight
main.js
import btnRight from './directive/btn-right'; Vue.use(btnRight);
应用到标签
<divclass="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 {// 有权限}},
