DemocracyOS-Tip 是一个npm包，它提供了一个非常简单的方式，在您的网站上创建引导教程。本文将会介绍如何安装并使用该包。
安装
在开始使用之前，您需要先安装 npm，接着打开终端执行以下代码：
npm install democracyos-tip --save
使用
使用 democracyos-tip 来创建一个提示，您需要:
- 引入库
<link rel="stylesheet" href="node_modules/democracyos-tip/dist/democracyos-tip.min.css" /> <script src="node_modules/democracyos-tip/dist/democracyos-tip.umd.min.js"></script>
- 创建包含引导步骤的 JSON 对象
-- -------------------- ---- -------
----- ----- - -
-
-------- --------
-------------- --------------
--------- -------------------
------------ -------
--
-
-------- --------
-------------- --------------
--------- -------------------
------------ --------
-
--- 创建并显示提示
const Tips = democracyos.Tips; const tips = new Tips(steps); tips.show();
可选参数
除了上述参数，创建引导提示您还可以使用以下可选参数：
-- -------------------- ---- -------
----- ----- - -
-
-------- --------
-------------- --------------
--------- -------------------
------------ --------
-------- ----
------------ -------
-------------- ---
--------- ------
------------------ ------
---------------------- -----
--------- -- -- -
----------------------
--
--------- -- -- -
----------------------
-
-
--- delay: 显示提示延迟时间，默认值 0
- container: 插入提示DOM的容器，默认值 document.body
- arrowOffset: 设置提示弹出箭头偏移， 默认值 10
- zIndex: 设置提示的zIndex， 默认值 9999
- enableScrolling: 开启或关闭页面滚动， 默认值 true
- closeOnClickOutside: 点击提示以外的区域自动关闭， 默认值 true
- onShow/onHide: 覆盖默认显示及隐藏的回调函数
示例代码
-- -------------------- ---- -------
------
------
----- ---------------- ---------------------------------------------------------------- --
-------
------
--------------- --- ------------
------- ----------- ------------------- ------- -------------
------- ----------------------------------------------------------------------------
--------
----- ----- - -
-
-------- --------
-------------- --------------
--------- -----------
------------ -------
--
-
-------- --------
-------------- --------------
--------- -----
------------ --------
-
--
----- ---- - -----------------
----- ---- - --- ------------
------------------------------------------------------------ ---------- -
------------
---
---------
-------
-------以上就是使用 democracyos-tip 的详细介绍，该包不仅使用简单且以某种方式扩展了网站的UI。希望这篇文章能够帮助您，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/130562