Vue 自定义指令控制按钮权限

 

Vue自定义指令控制按钮权限

 

1. 定义自定义指令代码

1.1新建 directives.js 文件

import Vue from 'vue'
import store from '@/store/index'

// 自定义按钮控制指令
Vue.directive('permission', {
  // 当被绑定的元素插入到DOM中时
  inserted: function (el, attrs) {
    /**
     * 从Vuex中拿到按钮权限列表
     */
    const list = store.getters['account/btnList']

    /**
     * 标签上绑定的数据 arg是指令后面的数据
     * 例如 v-permission:upload
     * arg 就是'upload'
     */
    const { arg } = attrs

    /**
     * 如果权限列表中包含这个按钮的权限就什么都不做
     * 否则就 display:none 隐藏这个按钮
     * 也可以从Dom中删除这个按钮
     * 由于权限不是很敏感所以采用 display:none
     */

    el.style.display = list.includes(arg) ? '' : 'none'
  }
})

 

2. 如何使用

 <a-button type="primary" v-permission:custom_button @click="addItem">
    <a-icon type="plus" /> 新增
 </a-button>

 

3. 最后记得在main.js引入

 

如果有更好的方法欢迎指正.