Vue-Clickaway 是一个 npm 包，它提供了一种简便的方法来处理用户在 Vue.js 应用程序中点击 DOM 元素外部的行为。该包可以帮助开发人员在处理下拉菜单、对话框、模态框等交互组件时更方便地管理应用程序状态，并且不需要编写大量的代码来处理这些复杂的事件。
安装 Vue-Clickaway
我们可以通过 npm 来安装 Vue-Clickaway 包：
npm install vue-clickaway --save
在 Vue.js 应用程序中使用 Vue-Clickaway
要使用 Vue-Clickaway 包，需要将它作为 mixin 导入到 Vue 组件中。在 mixin 中，我们可以添加 v-clickaway 指令，它会自动监听 DOM 元素外的所有点击事件。
接下来让我们看一个示例：
-- -------------------- ---- -------
----------
---- ------------------------
-------- ------------------
------- ---------------------------------
------ --------------------- --
------
-----------
--------
------ --------- ---- ---------------
------ ----- ---- ------------------------
------ ------- -
------- ------------
----------- - ----- --
------ -
------ -
--------------- ------
-
--
-------- -
----------- -
------------------- - ----
--
----------- -
------------------- - -----
--
--
-
---------在上面的示例中，我们定义了一个 v-clickaway 指令并将它添加到包裹模态框的 <div> 元素中。当用户点击模态框以外的区域时，该指令会自动调用 hideModal() 方法来关闭模态框。
Vue-Clickaway 的指令修饰符
Vue-Clickaway 还提供了一些方便的指令修饰符，使我们可以更加细致地控制某些点击事件。
v-clickaway:escape
使用 v-clickaway:escape 可以在按下 ESC 键时触发回调函数。例如：
<template>
<div v-clickaway:escape="hideModal">
<h1>欢迎使用 Vue-Clickaway</h1>
<button @click="showModal">显示模态框</button>
<modal v-if="isModalVisible" />
</div>
</template>在这个示例中，我们添加了 v-clickaway:escape 指令，并将其与 hideModal 回调函数绑定。当用户按下 ESC 键时，指令会自动调用该方法关闭模态框。
v-clickaway:out
使用 v-clickaway:out 可以在特定元素中监听点击事件。例如：
-- -------------------- ---- -------
----------
---- ---------------------------
-------- ------------------
------- ---------------------------------
--- ---------------------
------- ------
------- ------
------- ------
-----
------
-----------在这个示例中，我们添加了 v-clickaway:out 指令，并将其与 hideMenu 回调函数绑定。当用户点击除了下拉菜单以外的所有元素时，该指令会自动调用该方法隐藏下拉菜单。
结论
Vue-Clickaway 是一个非常有用的 npm 包，它可以帮助开发人员更轻松地处理复杂的交互组件。通过使用这个包，我们可以避免编
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37192