用vue自定义指令设置页面权限

1.按钮权限处理

 /*** v-hasPermi 按钮权限处理*/import store from '@/store'export default {inserted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";const permissions = store.getters && store.getters.permissionsif (value && value instanceof Array && value.length > 0) {const permissionFlag = valueconst hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})if (!hasPermissions) {// el.parentNode && el.parentNode.removeChild(el)el.style.display = 'none'}} else {throw new Error(`请设置操作权限按钮值`)}}
}

2.注册自定义指令

import hasPermi from './hasPermi'
const install = function(Vue) {Vue.directive('hasPermi', hasPermi)
}if (window.Vue) {window['hasPermi'] = hasPermiVue.use(install);
}export default install

 3.使用自定义指令

数组里面的数字的接口获取的，和后端规定好，数字几代表什么权限，比如我和后端规定好，4代码页面权限=

 <div class="living-room-list-rep" v-hasPermi="['4']">