1. Create a new hasPermission.js file
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. Introduce in main.js
import hasPermission from '@/libs/hasPermission'
Vue.use(hasPermission);
Vue.prototype.hasPermission = hasPermission;
3. The code value in the database.
INSERT INTO fast_oss.oss_menu (id, code, title, parent_id,) VALUES(7060306,'hojiPremiunmManual', '手动', 7058227)
4. When using the interface to obtain menu information, save the button code in vuex
vm.$store.commit('updataButton',resp.result.functions)
5. mutations function in vuex
updataButton(state,data) {
state.dashControl = data // dashControl是state里的一个数组
},
7. Page usage.
<Button type="ghost" @click="derive" v-has="'hojiPremiunmManual'">导出</Button>
Note that the content of the v-has value here must be of string type.
8. Used in render function.
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值
},"手动")
])
The effect when the button is displayed
When the button is not shown: