vue中使用自定义指令实现按钮权限展示问题

 一、在src/directive新建文件夹

<el-button
    type="warning"
    icon="el-icon-download"
    size="mini"
    v-hasPermi="['wm:wmstock:export']"
>导出</el-button>

二、定义index.js文件，在vue上注入自定义指令

import hasPermi from './permission/hasPermi'

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

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

export default install

三、编写自定义指令

 /**
 * v-hasPermi 操作权限处理
 */
 
import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

四、main.js中引用directive

import Vue from 'vue'
import directive from './directive'

Vue.use(directive)

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

五、使用

<el-button
    type="warning"
    icon="el-icon-download"
    size="mini"
    v-hasPermi="['wm:wmstock:export']"
>导出</el-button>