vue的use插件及权限使用

    Vue为什么要弄两个注册插件的方式？他们各自有什么优点和联系？先说结论，
Vue.use和Vue.prototype没有本质区别，Vue.use就是在Vue.prototype基础上又封装了
一层而已，他们实现的原理都是在Vue.prototype上添加了一个方法，Vue.prototype适
合于注册Vue生态外的插件，Vue.use适合于注册Vue生态内的插件，use必须实现install方法。

1. 拿一个自定义的权限插件来说明，先在main.js里面应用插件

import directive from './directive' 
Vue.use(directive)   

2. 在directive里面执行install方法，并调用自定义函数

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

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


export default install

3. 自定义v-hasPermi 函数

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

export default {
  // directive里面我们常用这三种
  //bind--只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。和style有关的操作，最好在bind中去执行
  //inserted--（被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。和JS行为有关的操作，最好在 inserted 中去执行，否者 JS行为不生效
  //update--当VNode更新的时候，会执行 updated， 可能会触发多次

  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(`请设置操作权限标签值`)
    }
  }
}

4. 调用

        <el-button
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['XXX:XXX:XXX']"
        >新增</el-button>