点击右上方红色按钮关注“web秀”，让你真正秀起来

前面有专门的文字，讲过Vue指令，以及如何使用指令，今天就来讲讲如何添加全局指令，并且附上2个非常适用的例子。

Vue全局指令：如何添加全局指令？（附2个常用自定义指令）

在上面文章中，提到过一种方法，在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$/)); });

Vue全局指令：如何添加全局指令？（附2个常用自定义指令）

这里用到了require.context函数，require.context是webpack中，用来创建自己的（模块）上下文。 require.context函数接收三个参数：

1、要搜索的文件夹目录

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

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

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

下面我们来看看2个实用的自定义指令。

Vue全局指令：如何添加全局指令？（附2个常用自定义指令）

这个指令的的作用是什么？

比如：一个按钮点击后弹出一个浮层，然后点击按钮外的所有事件，都关闭浮层。

export default { clickOut: { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false; } // 判断指令中是否绑定了函数 if (binding.expression) { // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法 binding.value(e); } } // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听 el.__vueClickOutside__ = clickHandler; document.addEventListener('click', clickHandler); }, update() {}, unbind(el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; } } }