利用driective 构建自己的指令，实现按钮级别权限

项目结构如下：

修改router.js

{        path: 'schools',        name: '列表',        component: () => import('./eduAdministration/SchoolList'),        meta: {          permissions: ['schools'],          btnpermissions:['admin','test'],          title: '列表',          icon: '',          scrollToTop: true        }      },

新建文件 btnPermission.js文件

内容如下

import Vue from 'vue'import store from '../index'/**权限指令**/const has = Vue.directive('has', {  bind: function (el, binding, vnode) {    // 获取按钮权限    let Permissions = vnode.context.$route.meta.btnpermissions;    console.log('permission',Permissions)    if (!Vue.prototype.$_has(Permissions)) {      let className=el.getAttribute("class")      className=className.concat(" hidden")      el.setAttribute("class",className)    }  }});// 权限检查方法Vue.prototype.$_has = function (value) {  let isExist = false;   debugger  let PermissionsStr =store.getters.roles;  if (PermissionsStr == undefined || PermissionsStr == null) {    return false;  }  PermissionsStr.forEach((per)=>{    if (value.indexOf(per) > -1) {      isExist = true;    }  })  return isExist;};export {has}

将文件引入index.js

import Vue from 'vue'import Vuex from 'vuex'import app from './modules/app'import user from './modules/user'import getters from './getters'import permission from './modules/permission'import has from './modules/btnPermission'Vue.use(Vuex)const store = new Vuex.Store({  modules: {    app,    user,    permission  },  getters})export default store

页面添加权限

el-button(size='mini' @click="handleEdit(scope.row)" v-has) 编辑

最后一步

在 css中添加hidden样式

 

大功告成