介绍
v-click-outside-x 是一个基于 Vue 的 npm 包，用于实现 Vue 组件中的点击外部区域触发事件的功能，特别适用于需要隐藏弹出层、下拉选择框、模态框等等的场景。
v-click-outside-x 基于 v-click-outside，但是额外支持了多个元素共用同一个回调函数。
安装
使用 npm 安装 v-click-outside-x。
$ npm install v-click-outside-x --save
使用
将 v-click-outside-x 作为一个指令，添加到你需要使用点击外部区域触发事件的组件上。
-- -------------------- ---- -------
----------
---- --------------------- -- - ------------- ---------
-----------
--------
------ --- ---- -----
------ -------------- ---- -------------------
-----------------------
------ ------- -
-------- -
------------- -
-- ---------
-
-
-
---------被点击的区域必须是一个元素，所以我们把指令加在最外层的 <div> 上，实现点击除了这个元素以外的区域触发回调函数。
注意事项
- v-click-outside-x 不能和 v-click-outside 同时存在于同一个项目中，会导致冲突。
- v-click-outside-x 不支持绑定到动态生成的元素上，只能绑定到静态元素上。
示例代码
-- -------------------- ---- -------
----------
---- ------------- ---------------------------------------
------- -------------------- - -----------------------------
--- --------------------- ----------------------
------ ------
------ ------
------ ------
-----
------
-----------
--------
------ --- ---- -----
------ -------------- ---- -------------------
-----------------------
------ ------- -
------ -
------ -
------------- -----
-
--
-------- -
-------------------- -
----------------- - -----
-
-
-
---------这个示例代码实现了点击某个区域外部，隐藏下拉框的功能。注意到，我们把指令 v-click-outside-x 加在了外层的 <div> 上，绑定的回调函数是 handleClickOutside。当点击下拉框以外的区域时，v-click-outside-x 会自动触发 handleClickOutside 函数，从而隐藏下拉框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/164924