简介
ember-hopscotch 是一个基于 Ember.js 框架的 npm 包，它提供了一个强大的实时导航体验，可以帮助用户快速学习和使用您的应用程序。本篇文章将详细介绍如何使用 ember-hopscotch 包，以及如何实现跨页面的导航功能。
安装
使用 ember-cli 快速创建一个新的 Ember 应用程序，并执行以下命令来安装 ember-hopscotch 包：
ember install ember-hopscotch
安装完毕后，您需要在 app/application.hbs 中添加以下内容，以在应用程序的页面上添加 hopscotch：
{{ember-hopscotch}}使用
配置
在您的组件、控制器或路由上，您需要定义一个叫做 tourOptions 的配置属性，它是一个包含了 hopscotch 步骤对象的数组，例如：
-- -------------------- ---- -------
------ ---------- ---- -------------------
------ ------- -------------------
------------ -
-
------- ---------
------ ------
-------- --------
---------- -----
--
-
------- ---------
------ ------
-------- --------
---------- -------
--
-
------- ---------
------ ------
-------- --------
---------- ------
--
-
------- ---------
------ -------
-------- ---------
---------- --------
-
-
--这里定义了一个简单的 Auto-Tour，它包含了四个步骤，每个步骤都有一些元素信息和其他属性。
启动 Tour
一旦您定义了 tourOptions，您就可以在任何时间启动它，例如在页面的 didInsertElement 回调函数中：
-- -------------------- ---- -------
------ ---------- ---- -------------------
------ ------- -------------------
------------ ------
-------- -
----------- -
-------------------------------------------------------------
-
-
--API
ember-hopscotch 提供了以下 API：
emberHopscotch.startTour(tourOptions, [skipIfAlreadySeen])
这个函数将启动一次新的 hopscotch Tour，使用 tourOptions 做为参数，可以配置自动化的步骤。
emberHopscotch.startTour(tourOptions, [skipIfAlreadySeen]);
tourOptions- 用于hopscotch的 Tour 配置选项skipIfAlreadySeen- 如果用户以前已经完成了这个 Tour，将跳过这个 Tour。
emberHopscotch.configure(options)
配置 hopscotch 的全局选项，例如默认的 placement，动画时间等等。
emberHopscotch.configure(options);
总结
ember-hopscotch 是一个非常实用且易用的自动化导航工具，可以帮助您为您的 Ember 应用程序创建独特的用户体验。希望通过本文的介绍，您可以轻松地使用 ember-hopscotch，并在您的应用程序中实现功能丰富的导航功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca4c