Vue.use() 全局注册组件、Vue.directive() 全局注册指令

一、Vue.use() 全局注册组件

require.context(directory,useSubdirectories,regExp)

1、directory:表示检索的目录；
2、useSubdirectories：表示是否检索子文件夹；
3、regExp:匹配文件的正则表达式,一般是文件名；
例如 require.context("@/views/components",false,/.vue$/)

//引入指定目录下vue文件
const context = require.context('./',false,/\.vue$/)

const HamoUI = {
  install(Vue) {
    context.keys().forEach(path => {
      // 组件实例
      const item = context(path).default;
     // 组件挂载
      Vue.component(item.name,item)
    })
  }
}
export default HamoUI

在main.js中全局引入，用Vue.use()；

// import HamoUI from "@/pages/count/pay/components/index"
// Vue.use(HamoUI)

二、Vue.directive() 全局注册指令

has.js
bind只调用一次，指令第一次绑定到元素时调用，可以用这个钩子函数定义一个在绑定时执行一次的初始化动作。

const Directive = {
  bind(el,bindings) {
    const permissions = JSON.parse(localStorage.getItem('permissions'));
    const hasPermission = permissions.includes(bindings.value)
    if (!hasPermission) {
      el.style.display = "none";
      setTimeout(function () {
        el.parentNode.removeChild(el)
      }, 0);
    }
  }
}
export default {
  name:'has',
  Directive
}

index.js 引入所有指令，注册指令

const DireactiveContext = require.context('./global',false,/\.js$/)
const DireactiveAll = {
  install() {
    DireactiveContext.keys().forEach(path => {
      const item = DireactiveContext(path).default;
      Vue.directive(item.name,item.Directive)
    })
  }
}
export default DireactiveAll

在main.js中全局引入，用Vue.use()使用指令；

import DirectivesAll from '@/directives/index'
Vue.use(DirectivesAll)