vue全局引入自定义指令来控制按钮权限

第一次发文的小菜鸟，大佬们有更好的建议请多多指教

1.在src文件夹下新建文件夹directives，在此文件夹中新建文件permission.js

import store from '@/store'

const directive = {}
directive.install = Vue => {
    Vue.directive('has',{
        bind:function(el,binding,vnode){
            // 解构store中存储的permission数据
            let { user = {} } = store.state
            let {permissions = []} = user
            console.log('permissions',permissions);

            // 判断permission数组中是否包含binding.value的值
            // console.log(permissions.includes('sys:log:delete'));
            console.log(permissions.includes(binding.value));

            // permission数组中包含binding.value的值时，显示按钮；否则隐藏
            permissions.includes(binding.value)?el.style.display='true':el.style.display='none'
        }
    })
}
export default directive

2.在全局文件main.js中引入

// 导入按钮权限自定义指令
import directive from '@/directives/permission'
Vue.use(directive)

3.在页面中引用自定义指令‘has’

// permission数组中不包含'sys:user:add2'，故该按钮隐藏
权限2

// permission数组中包含'sys:user:add'，故该按钮显示
权限1