前言
在开发前端应用时，我们经常需要处理点击事件。但有时我们需要对点击事件做出一些特殊处理，例如点击外部区域时触发某个动作或关闭某个弹框。为了实现这一功能，我们可以使用 vue-on-click-outside 这个 npm 包，它可以让我们很方便地实现点击外部区域触发事件的功能。
使用方法
安装
使用 vue-on-click-outside 前，需要先进行安装：
npm install vue-on-click-outside --save
引入
在你的 Vue 组件中，引入 vue-on-click-outside：
import onClickOutside from 'vue-on-click-outside'
注册指令
定义一个局部指令，并使用 vue-on-click-outside：
directives: {
onClickOutside: onClickOutside.directive,
},这样就可以在你的 Vue 组件中使用 v-on-click-outside 指令了。
绑定事件
接下来，你可以将 v-on-click-outside 放在你要绑定事件的组件上，例如下面这个简单的例子：
-- -------------------- ---- -------
----------
---- --------------------------------
---- ------------- --------------------------
------- ----------------------------- --------------
------
-----------
--------
------ ------- -
----------- -
--------------- -------------------------
--
------ -
------ -
------------- ------
-
--
-------- -
------------- -
----------------- - ------------------
--
------------ -
----------------- - -----
--
--
-
---------
-------
------ -
--------- ---------
----------------- ------
------ ------
------- ------
---- -----
----- -----
------- --- ----- ------
-
--------在这个例子中，我们定义了一个 div，并在其上使用了 v-on-click-outside 指令，当用户点击 div 外部时，将会触发 closePanel 函数。
指令修饰符
除了常规的绑定事件外，vue-on-click-outside 还提供了一些指令修饰符，可以帮助我们更好地控制事件。
stop
stop 指令修饰符会阻止事件继续传播。例如，以下代码：
<div v-on-click-outside.stop="closePanel"></div>
将会阻止事件的继续传播，不会触发 document 上的 click 事件。
prevent
prevent 指令修饰符会阻止事件的默认行为。例如，以下代码：
<div v-on-click-outside.prevent="closePanel"></div>
将会阻止事件默认的行为，例如链接不会被打开。
capture
capture 指令修饰符会启用事件的捕获模式。例如，以下代码：
<div v-on-click-outside.capture="closePanel"></div>
将会使用事件的捕获模式，从 document 开始向下寻找目标。
passive
passive 指令修饰符可以让事件以被动方式传播。这样可以优化页面渲染速度。例如，以下代码：
<div v-on-click-outside.passive="closePanel"></div>
将会让事件以被动方式传播。
总结
vue-on-click-outside 是一个十分实用的 npm 包，可以帮助我们很方便地实现点击外部区域触发事件的功能。通过对其指令的修饰符的使用，我们可以更灵活地控制事件。希望这篇文章可以帮助你更好地使用 vue-on-click-outside。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de15e