vue自定义指令（权限按钮）

image.png

2.index.js

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

3.permission.js

import store from '@/store'

export default {
  inserted (el, binding) {
    // console.log('权限按钮设置');
    const { value } = binding
    const roles = store.getters && store.getters.roles
    if (value && value instanceof Array) {
      if (value.length > 0) {
        const permissionRoles = value
        const hasPermission = roles.some(role => {
          return permissionRoles.includes(role)
        })
        if (!hasPermission) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    } else {
      throw new Error(`使用方式： v-permission="['admin','editor']"`)
    }
  }
}

4.main.js

import permission from './components/Permission'
Vue.use(permission)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})