Vue指令:通过权限控制按钮显示

import Vue from 'vue'
import Store from '@/store'
/**
 * 权限控制按钮显示指令
 * @params {Array[String,Boolean]}  [权限code码,其他控制条件]
 */
function changeHaspms(el, binding){
    if (!permissionJudge(binding.value)) {
        el.style.display="none"
    }else{
        el.style.display=""
    }
    function permissionJudge(value) {
        const [code,otherFlag=true] = value
        const list = Store.getters.permissions
        const hasPms = list.includes(code)
        return hasPms && otherFlag
    }
}
Vue.directive('haspms', {
    bind: function(el, binding,vnode) {
        changeHaspms(el, binding)
    },
    update(el, binding,vnode){
        changeHaspms(el, binding)
    }
})

 使用

  

<li @click="updateOrganizeStatus($event,organizeItem)"
        v-haspms="['PZZX.ZZGL.QY',organizeItem.status === 0]">启用
</li>

  

 

原文地址:https://www.cnblogs.com/BlueCc/p/14339424.html