vue批量注册全局自定义指令

**斜体样式vue前端开发一般在做后台管理系统时最常见的一个需求就是要做权限控制，不同的角色需要能做不同的操作，有时候也需要对按钮进行细粒度的控制，这时候就可以注册一个全局自定义指令来解决这个问题

首先在src文件夹下新建工具函数目录utils

在utils下新建js文件directives.js用来存放所有的全局指令

export default Vue => {
  // 使用 Vue.directive()定义全局的指令
  // 参数1：指令的名称，注意，在定义的时候，指令的名称前面不需要加 v- 前缀,
  // 但是：在调用的时候，必须在指令名称前加上v-前缀来进行调用
  // 参数2：是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
  Vue.directive('fileA', {
    // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
    // 注意： 在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
    bind: (el, data) => {
      console.log(el, data, '全局指令')
    },
    // inserted 表示元素插入到DOM中的时候，会执行 inserted 函数【触发1次】
    // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
    inserted: (el, data) => {},
    // 当VNode更新的时候，会执行 updated，可能会触发多次
    updated: (el, data) => {}
  }),
    Vue.directive('fileB', {
      // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
      // 注意： 在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
      bind: (el, data) => {
        console.log(el, data, '全局指令')
      },
      // inserted 表示元素插入到DOM中的时候，会执行 inserted 函数【触发1次】
      // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
      inserted: (el, data) => {},
      // 当VNode更新的时候，会执行 updated，可能会触发多次
      updated: (el, data) => {}
    })
}

最后在main.js中注册

//注册全局指令
import directives from '@/utils/directives.js'
Vue.use(directives)

页面中直接使用指令