简介
@jskhirtladze/jigra-tour 是一个适用于前端的 npm 包，可以为用户提供一个交互式的引导式导览，用于展示网页的特性、功能和操作流程等，以引导用户更好地使用网页。
该包基于 jigra-core 构建，具有高度的可扩展性，可以根据用户的需求进行定制化。
安装
使用 npm 安装：
npm install @jskhirtladze/jigra-tour --save-dev
使用
引入
将 @jskhirtladze/jigra-tour 作为一个模块导入到前端项目中，例如：
import Tour from "@jskhirtladze/jigra-tour";
初始化
在需要展示引导式导览的页面中，进行初始化：
new Tour(steps, options).start();
其中，steps 为引导步骤列表，options 为用户选项。
例如，以下是一个简单的使用示例：
-- -------------------- ---- -------
----- ----- - -
-
------- --------
-------- -------------------
------ -------
---------- ---------
--
-
------- ------------
-------- ---------------------
------ -------
---------- -------
--
--
--- --------------------上述示例中，创建了一个包含两个引导步骤的 @jskhirtladze/jigra-tour 实例，第一个步骤的目标是 ID 为“logo”的元素，展示了一个标题为“网站标志”的提示，第二个步骤的目标是 ID 为“register”的元素，展示了一个标题为“注册按钮”的提示，一共展示两次。
引导步骤对象
引导步骤对象的属性包括：
- target：目标元素的选择器。
- content：当前步骤的展示内容。
- title：当前步骤的标题。
- placement：当前步骤展示的方位，可选值：top、right、bottom、left。
用户选项
引导式导览的用户选项包括以下属性：
- stepCallback：每一步的回调函数。
- doneCallback：完成引导式导览后的回调函数。
new Tour(steps, {
stepCallback: function(stepIndex) {
console.log(stepIndex);
},
doneCallback: function() {
console.log("done");
},
}).start();上述示例中，设置了每一步结束时都回调 stepCallback 函数，完成引导式导览后回调 doneCallback 函数。
总结
@jskhirtladze/jigra-tour 是一个具有高度可扩展性和定制化的 npm 包，可以为前端网页提供交互式引导式导览，方便用户更好地了解和使用网页。在使用过程中，我们需要根据需求进行定制化，配置好引导步骤列表和用户选项，以达到最好的展示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a1781e8991b448d7b9e