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.$mit('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值},"手动")])
按钮显示时效果
按钮未显示时：
