天元建设集团有限公司证券北京网站优化效果

运用场景； 根据权限码，实现判断当前用户是否能控制权限按钮

一、在main.JS 里面写入全局指令《自定义权限按钮》

// S 自定义按钮权限
Vue.directive('has', {inserted: function(el, binding) {const buttonList = JSON.parse(localStorage.getItem('buttonList'))const value = binding.valuelet hasPermission = false // 默认初始权限为空buttonList.map(item => {if (item.permissionCode === value) {hasPermission = true}})if (!hasPermission) {el.style = 'display:none'setTimeout(() => {el.parentNode.removeChild(el)}, 0)}}
})
// E 自定义按钮权限

在上面的代码中，

1、每次进入页面，会拿到该页面有哪些按钮标识码·binding.value·

2、遍历按钮标识列表·buttonList· ；

3、如果按钮标识列表与页面按钮标识码存在一致；则显示该按钮

二、调用

<el-button v-has="'permission@create'" >新增用户</el-button><el-button v-has="'permission@delete'" >删除用户</el-button>

三、参考链接：

应用实例 API | Vue.js