npm 包 Shepherd 使用教程

Shepherd 是一个开源的 JavaScript 库，提供了一种易于使用但功能强大的方式来创建带有导航和浮动提示的交互式向导。本文将详细介绍如何使用 Shepherd。

安装与引入

首先，在项目中安装 Shepherd：

npm install shepherd.js --save

然后，在需要使用 Shepherd 的页面中引入它：

<script src="node_modules/shepherd.js/dist/js/shepherd.min.js"></script>

创建步骤

Shepherd 将向导看作是由多个步骤组成的过程。下面展示了创建一个简单的向导步骤的代码：

-- -------------------- ---- -------
----- ---- - --- ---------------
  ------------------- -
    ------ -----
    -------- -
      -
        ----- -------
        ------- ---------
      --
      -
        ----- ---------
        ------- ------------
        -------- ---------------------------
      -
    --
  -
---

--------------
  ------ ----- ---
  ----- ----- -- --- ----- ---- -- --- -------
  --------- -
    -------- -------------------
    --- --------
  -
---

-------------

这段代码创建了一个名为 tour 的新向导，其中包含一个名为 Step 1 的步骤。该步骤显示了一条消息，并在 .example-element 元素的下方显示了一个箭头。此外，它显示了两个按钮：一个标有“下一步”文本的主要按钮，以及一个标有“取消”文本的辅助按钮。

更多选项

除了上面的 attachTo、title 和 text 选项外，Shepherd 还提供了许多其他选项，以帮助您自定义向导的外观和行为。以下是其中一些选项：

• classes：为步骤添加自定义 CSS 类。
• beforeShowPromise：在显示步骤之前运行的回调函数。
• showCancelLink：控制是否显示“取消”链接。
• when：定义何时应该跳转到下一个步骤。

使用事件

Shepherd 还提供了多个事件，可用于在向导生命周期中执行自定义操作。例如，以下代码演示了如何在向导结束时弹出一个消息框：

tour.on("complete", () => {
  alert("Tour complete!");
});

以下是 Shepherd 的其他事件：

• cancel
• hide
• inactive
• show
• start

结论

本文详细介绍了 Shepherd 如何使用。尽管 Shepherd 简单易用，但它提供了丰富的功能和选项，使您能够创建高度定制化的交互式向导。希望这篇文章对读者有所帮助，可以更好地利用 Shepherd 来实现自己的项目需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32858