随着现代 Web 应用的发展，交互体验越来越重要。而介绍功能、引导用户成为核心部分之一。引入 @zeno-core/intro-js 可以轻松地实现可定制化、适用于各种场景的引导效果。本文介绍了关于 @zeno-core/intro-js 的一些实用技巧和使用指南，以及一些简单的示例代码供读者参考。
什么是 @zeno-core/intro-js
@zeno-core/intro-js 是一个 JavaScript 库，可以快速地为网站和 web 应用创建和管理组合引导。基于 Intro.js，这个库可用于创造与业务逻辑相关的步骤（如指南提示、渐进添加新内容、回流页面等）。
简单来说，这个库可以为前端应用程序提供一个可定制化且易于使用的可交互性示例步骤，以帮助用户更快地了解应用程序的不同部分，因此提高用户对该应用程序的使用体验。
如何使用 @zeno-core/intro-js
首先，安装该 npm 包：
npm i @zeno-core/intro-js
在代码中导入包：
import IntroJS from '@zeno-core/intro-js';
在文档准备就绪后，初始化并调用 introJs：
document.addEventListener('DOMContentLoaded', () => {
const intro = IntroJs().start();
}此时就会启动引导页面。该步骤默认情况下会整个容器元素，并将第一个子元素设为要介绍的内容。
可以为 introJs() 函数传递配置参数，来自定义生成的引导。
-- -------------------- ---- -------
----- ----- - -
-
-------- -----------------------------------
------ ----------
--
-
-------- -----------------------------------
------ ----------
-
--
----- ------ - -- -- - -------------- --
----- ------------ - -
------
---------------- -----
------------------- -----
---------- -----
------------ -----
-------
--------------- --------------- -- -
-------------------- -- ---------------
-
--
----- ----- - --- ----------------------
--------------高级使用
属性
IntroJS 实例具有许多自定义属性，这些属性可以在 introOptions 中设置。以下是一些最有用和最常用的属性：
steps
这是一个由以 Step 对象形式的数组。
每个 Step 对象本身应该包含：
- element：一个有效的 HTML 元素，应该被介绍。
- intro：一段调用该步骤时应该被显示的信息。
- position：箭头的方向。
showStepNumbers
一个 true 或 false 值。如果为 true，则为步骤提供数字。默认值为 true。
exitOnOverlayClick
一个 true 或 false 值。如果为 true，则用户可以通过单击覆盖图层来退出引导。默认值为 true。
exitOnEsc
一个 true 或 false 值。如果为 true，则用户可以通过按 ESC 键来退出引导。默认值为 true。
showBullets
一个 true 或 false 值。如果为 true，则为步骤提供标记（所有步骤的完整列表） 。默认值为 true。
方法
start()
在调用 IntroJs() 时不会自动启动引导。因此必须手动调用 start() 方法。
exit()
中断引导。
goToStep(StepNumber)
直接跳转到给定步骤。
事件
当引导进入、更改或退出某个步骤时，IntroJS 对以下事件进行控制。
onbeforechange(function)
在更改引导到新步骤之前，引发此事件。提供对将被引导到的元素的引用参数。
onchange(function)
在更改引导到新步骤时，引发此事件。提供对将被引导到的元素的引用参数。
onafterchange(function)
在更改引导到新步骤之后，引发此事件。提供对当前步骤对象的引用参数。
oncomplete(function)
在用户完成引导时，引发此事件。在调用 exit() 或用户单击主导图层上的“结束介绍”按钮时触发。
onexit(function)
在引导退出时，引发此事件。将从中断按钮调用。
示例
以下是一个简单的示例：
-- -------------------- ---- -------
------ ------- ---- ----------------------
--------------------------------------------- -- -- -
----- ----- - -
-
-------- -----------------------------------
------ ----------
--
-
-------- -----------------------------------
------ -----------------------
--
-
-------- -------------------------------------------
------ -----------------------
--
-
-------- -------------------------------------------
------ ------------
-
--
----- ------ - -- -- - --------------- --
----- ------------ - -
------
---------------- -----
------------------- -----
---------- -----
------------ -----
-------
--------------- --------------- -- -
-------------------- -- ---------------
-
--
----- ----- - --- ----------------------
--------------
---总结
@zeno-core/intro-js 是一个出色的 npm 包，可用于增强我们的前端应用程序的用户体验。使用该库，可以轻松地添加交互式的引导组件，指导用户完成他们所需的任务。本文列举了一些 @zeno-core/intro-js 的使用技巧，希望您会在实践中使用该库来完善您的 Web 应用程序并提高用户体验！
以上就是本文对于 @zeno-core/intro-js 包的详细讲解，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572cc81e8991b448e8fd9