我的做法是通过指令实现,我个人觉得控制显隐不太友好,可能会让人觉得是没有该功能,而不是自己的权限不足所导致,我的处理是置灰并文字提示
<el-button v-perm="$hasPerm('info:add')">新建</el-button>
$hasPerm
是挂载到全局的判断方法,判断当前权限是否在权限数组中,返回一个布尔值
v-perm
是自定义的指令
实现效果如图
v-perm指令代码如下,代码只做了el-button的处理
export default {
inserted(el, binding) {
if (!binding.value) {
const cover = document.createElement('div')
el.parentNode.replaceChild(cover, el)
cover.appendChild(el)
// el-button的处理
if (hasClass(el, 'el-button')) {
addClass(el, 'is-disabled')
// 使用innerHTML,会移除所有事件,即无权限时所有事件交互无效
const res = Vue.compile(`<el-tooltip class="item" effect="dark" content="权限不足,请联系管理员" placement="top-start">
${cover.innerHTML}
</el-tooltip>`)
const Tooltip = Vue.extend({
render: res.render
})
const tooltipIns = new Tooltip().$mount()
empty(cover)
cover.parentNode.replaceChild(tooltipIns.$el, cover)
}
}
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…