在前端开发过程中，有很多需要用户等待的操作，例如网络请求、计算等等。为了提升用户体验，我们一般都会在这些操作过程中显示一个“等待菊花”或者“加载中”的提示。而 block-ui 这个 npm 包就是一个用于实现这种“等待”效果的工具。
在本文中，我们将详细介绍使用 block-ui 包的方式，并提供示例代码以指导读者更好地了解和使用该工具。
安装
要使用 block-ui 包，你首先需要安装它。在终端中执行以下命令即可：
npm install block-ui --save
这个命令将会安装 block-ui 包，并将其添加到你的项目依赖中。
使用
block-ui 包的使用非常简单。以下是一个基础的示例：
-- -------------------- ---- -------
------ - ---- ---------
------ ------- ---- -----------
----------------------- ---------- -
-- -- ----- --
----------
-- --------------
--------
---- -------
------- -------
-------- ---------- -
-- -- ----- --
------------------
-
---
---在上述示例中，我们首先引入了 jQuery 和 block-ui 包。在按钮的点击事件中，我们通过 blockUI() 函数来启用 block ui，随后执行一个网络请求。当网络请求成功后，我们再通过 blockUI.unblock() 来关闭 block ui。
还有一些其它的配置选项可以用于自定义 block ui 的行为，例如：
fadeIn和fadeOut：用于指定 block ui 的显隐动画效果。默认为fadeIn: 200, fadeOut: 200。message：用于指定 block ui 中的提示信息。默认为“加载中…”。css：用于指定 block ui 的样式。默认为一个黑色半透明背景。
以下是一个包含所有配置选项的示例：
-- -------------------- ---- -------
------ - ---- ---------
------ ------- ---- -----------
----------------------- ---------- -
-- -- ----- --
---------
-------- -------
------- ----
-------- -----
---- -
------- -------
-------- -------
---------------- -------
------------------------ -------
--------------------- -------
-------- ---
------ ------
-
---
-- --------------
--------
---- -------
------- -------
-------- ---------- -
-- -- ----- --
------------------
-
---
---总结
在本文中，我们介绍了 npm 包 block-ui 的使用方法，并提供了示例代码以指导读者更好地进行学习和使用。使用 block-ui 包，可以方便地实现一个“等待菊花”的效果，提高用户体验。希望读者能够从中受益，更好地开展自己的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca82b5cbfe1ea061242f