vue权限控制显隐

权限来控制按钮显隐。
实现：我们需要自定义指令来控制
1.新建一个文件btnOption.js

import Vue from 'vue'
Vue.directive('has ', {
    inserted: function (el, binding) {
        let str = binding.value.split(':')[0];
        let strMenu = binding.value.split(':')[1];
        let strBtn = binding.value.split(':')[2];
		//最终的结果需要是
		 el.parentNode.removeChild(el);
})

//如果不是按钮，而是要隐藏某个页签可以使用自定义属性，通过v-if判断
Vue.prototype.$has = function (value) {
	//最终的结果需要是boolean类型
	return false    
}

2.main.js

import '@/utils/btnOption.js'

3.使用方法

<el-button  v-has="'system:config:add'">新增</el-button>

 <el-tab-pane  label="配置"  v-if="$has('system:config:peizhi')"></el-tab-pane>

保存一个写的比较好的权限显隐的文章https://www.jianshu.com/p/130a9d91bb94