自动关闭（Autoclose）是一个常见的前端 UI 需求。当用户在页面上操作一些需要关闭的组件时，如弹出框或菜单等，通常我们希望这些组件在用户离开它们之后自动关闭。这时，我们就需要一个自动关闭的组件，而 @uikit/autoclosable 就是一个很好的解决方案。
安装
@uikit/autoclosable 是一个由 UIkit 所提供的 npm 包，在使用前需要先安装。
npm install @uikit/autoclosable --save
使用
基本用法
@uikit/autoclosable 的基本使用非常简单。只需将需要自动关闭的元素，添加对应的 class 名称即可。
<div class="uk-autoclosable"> <!-- Your content here --> </div>
import { Autoclosable } from '@uikit/autoclosable'
const autoclosable = new Autoclosable('.uk-autoclosable')高级用法
@uikit/autoclosable 提供了更多的自定义配置选项，可以满足更多的需求。
触发方式
默认情况下，@uikit/autoclosable 是通过添加 click 事件监听器实现自动关闭的。但你也可以选择其它触发方式，例如 hover 或 focus 等。
const options = {
triggers: ['hover', 'click']
}
const autoclosable = new Autoclosable('.uk-autoclosable', options)关闭延时
改变自动关闭的延时时间。
const options = {
delay: 2000 // 延时 2 秒
}
const autoclosable = new Autoclosable('.uk-autoclosable', options)包括元素
默认情况下，点击目标元素或其子元素都会触发自动关闭事件。如果想关闭元素外的所有元素，可以使用 exclude 属性。
const options = {
exclude: '.exclude-me' // 不关闭包括 .exclude-me 元素
}
const autoclosable = new Autoclosable('.uk-autoclosable', options)示例代码
-- -------------------- ---- -------
------
------- --------------------------
---- ---------- ------------------------
---------------
----------------------
------
------- --------------------------
--------- -------------------- ---- ------- ------ - ------------ - ---- --------------------- ----- ------ - --------------------------------- ----- ----- - -------------------------------- -- --------- -------------------------------- --- -- - ------------------- - ------- -- -- -- ------------------- --------- ----- ------------ - --- -------------------------------- -- ----- ------------------------------- --- -- - ------------------- - ------ --
总结
@uikit/autoclosable 是一个非常好用的自动关闭组件，可以方便的实现弹出框和菜单等组件的自动关闭功能。除了基本用法外，还提供了很多配置选项，可以满足更多复杂的需求。希望这篇教程能够帮助你更好地使用这个组件，提高你的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f92238a385564ab6fef