目录
需求:
1. 有权限展示&可点击&点击上报数据;
2. 无权限展示&禁止点击
3. 无权限删除节点;
4. 有权限展示&点击不上报数据
方案:
通过自定义指令实现需求
code:
// 使用说明
// 控制权限:有权限可上报、无权限展示&禁止点击
// v-btnPermi="{permi: 'p_btn_xxx'}"
// 控制权限:有权限可上报、无权限删除节点
// v-btnPermi="{permi: 'p_btn_xxx', isHiden: true}"
// 控制权限:有权限展示&不上报数据、无权限删除节点
// v-btnPermi="{permi: 'p_btn_xxx', noReport: true, isHiden: true}"
export default {
created(el, binding) {
const { value } = binding
if (!value.noReport) {
// 用户有按钮权限:给按钮增加监听事件, 上报日志
el.addEventListener('click', () => {
// 点击按钮,上报日志
})
}
},
beforeMount(el, binding) {
const { value } = binding
let list = JSON.parse(localStorage.getItem('xxx')) // 获取缓存中的所有权限list
let hasPermi = list && list.indexOf(value.permi) > -1 ? true : false
// 无权限--禁用
if (!hasPermi) {
el.disabled = true
el.style = "cursor: no-drop"
}
// 无权限--删除节点
if (value.isHiden && !hasPermi) {
el.style = "display: none"
}
}
}
配置:
在main.js中全局引入
import btnPermi from '@/directive/btnPermi.js'
instance.directive('btnPermi', btnPermi)
使用:
<el-button @click="xxx()" v-btnPermi="{permi: 'p_btn_xxx'}">监控大屏</el-button>