vue自定义全局指令实现按钮的权限管理；

在main.js中定义全局自定义指令

 

 

//自定义全局指令进行全局权限管理
Vue.directive('allow', {
    bind: function (el, binding, vnode) {
        alert(binding.value.length);
        alert(global_.url);
        let permissionList = binding.value;//在页面上绑定的 对应权限显示
        var roles = ['6','2'];//获取的用户权限
       el.style.display="none";
        for (var i = 0; i < roles.length; i++) {
            if (permissionList.includes(roles[i])) {
               el.style.display="block";
                break;
            }
        }
       
    }
});

 

 

在页面上：

 <el-card shadow="hover" style="height:252px;" v-allow="['2','3']" >
                    <div slot="header" class="clearfix">
                        <span>语言详情</span>
                    </div>

 </el-card>