单个指令引入,在main.js(入口JS文件)中引入你已经写好的指令文件,可以省略文件后缀:

// main.js
import focus from 'xxx/directive'

多个指令引入
Vue.use((Vue) => {
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext);
    (arr || []).forEach((directive) => {
      directive = directive.__esModule && directive.default ? directive.default : directive;
      Object.keys(directive).forEach((key) => {
        Vue.directive(key, directive[key]);
      });
    });
  })(require.context('../directives', false, /^\.\/.*\.js$/));
});

这里用到了require.context函数,require.context是webpack中,用来创建自己的(模块)上下文。 require.context函数接收三个参数:

1、要搜索的文件夹目录

2、是否还应该搜索它的子目录

3、以及一个匹配文件的正则表达式

我们搜索directives目录下的所有js文件,遍历装载指令。

 posted on 2020-07-14 11:31  tammy-yaoyao  阅读(529)  评论(0)    收藏  举报