1. 新建 hasPermission.js文件
const hasPermission = {
install (Vue, options) {
Vue.directive('has', {
inserted (el, binding, vnode) {
// 由于前端路由是配置在数据库中,通过在数据库中的code值来,自定义指令来控制按钮。
let perms = vnode.context.$store.state.app.menuList; //vuex中的路由菜单
let check=false; // 定义变量
let length = perms.length;
let v = binding.value;
for(var i = 0 ;i!==length;i++){ // 遍历路由菜单数据
let menu =perms[i];
if(menu&&menu.meta&&menu.meta.permTypes==v){
check =true; // code值与自定义中的值相同,显示按钮
break;
}
if(menu&&menu.children&&menu.children.length>0){
let children = menu.children;
for(var j = 0;j!==children.length;j++){
if(children[j].meta.permTypes==v){ // 同理如上
check=true;
break;
}
}
}
}
if (!check) { // 如果code值与自定义指令不相同。
// el.parentNode.removeChild(el);
el.remove()
}
}
});
}
};
export default hasPermission;
2. 在main.js中引入
import hasPermission from '@/libs/hasPermission'
Vue.use(hasPermission);
Vue.prototype.hasPermission = hasPermission;
3. 数据库中的code值。
INSERT INTO fast_oss.oss_menu (id, code, title, parent_id,) VALUES(7060306,'hojiPremiunmManual', '手动', 7058227)
4. 在使用接口获取菜单信息的时候把按钮的code存到vuex里
vm.$store.commit('updataButton',resp.result.functions)
5. vuex中mutations函数
updataButton(state,data) {
state.dashControl = data // dashControl是state里的一个数组
},
7. 页面使用。
<Button type="ghost" @click="derive" v-has="'hojiPremiunmManual'">导出</Button>
注意,这里的v-has值的内容要是字符串类型的。
8. 在render函数中使用。
return h("div",[
h("Button",{
props: { type: 'text', size: 'small'},
style: { marginRight: '15px' },
on:{
click:()=>{
this.manualUpdate(params.row)
}
},
directives: [{ name: "has", value: "hojiPremiunmManual" }], // value值为SQL中的code值
},"手动")
])
按钮显示时效果
按钮未显示时: