在前端开发中，展示加载中状态是一个常见需求。但是手动实现加载中状态比较繁琐，需要写很多样式和逻辑代码。而 npm 包 @beisen-phoenix/mobile-loading 就为我们提供了一个快速、简洁的解决方案。
一、安装
使用 npm 安装 @beisen-phoenix/mobile-loading:
npm install @beisen-phoenix/mobile-loading
二、使用方法
使用 @beisen-phoenix/mobile-loading 只需要在需要展示加载中状态的元素上调用 Loading 组件即可。具体使用方式如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ---------------------------------
-------- ----- -
----- ----------- ----------- - ----------------
----- ------------- - -- -- -
-----------------
-- ---------------
-- ----- ----------------- -- ------- --
--
------ -
-----
------- ---------------------------------------
---------- -- -------- ---
------
--
-通过 useState 声明 isLoading 状态来控制 Loading 组件的展示与隐藏。在需要展示加载中状态时，将 isLoading 设置为 true，执行耗时操作；在操作完成后，将 isLoading 设置为 false，Loading 组件就会自动隐藏。
三、API
type 类型
type: ("default" | "circular" | "custom")
默认情况下，Loading 组件的 type 为 "default"。其中，"circular" 是一个圆形的加载中动画；"custom" 则允许我们自定义 Loading 组件。
size 大小
size: (number)
指定 Loading 组件的大小，默认值为 20。
color 颜色
color: (string)
指定 Loading 组件的颜色，默认值为 #34c37d。
strokeWidth 线宽
strokeWidth: (number)
指定 Loading 组件的线宽，默认值为 2。
duration 动画时长
duration: (number)
指定 Loading 组件的动画时长，单位为毫秒。默认值为 1000。
className 类名
className: (string)
指定 Loading 组件的样式类名，默认值为 ""。
四、示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ---------------------------------
-------- ----- -
----- ----------- ----------- - ----------------
----- ------------- - -- -- -
-----------------
-- --------
------------- -- -
------------------
-----------------
-- ------
--
------ -
-----
------- ---------------------------------------
---------- -- -------- ---
------
--
-五、总结
@beisen-phoenix/mobile-loading 是一个简单易用的 npm 包，为我们提供了一个方便快捷的加载中状态展示解决方案。使用 @beisen-phoenix/mobile-loading，可以大大提高开发效率，避免因样式和逻辑代码的编写而引入不必要的错误。希望这篇文章能够帮助大家更好地使用 @beisen-phoenix/mobile-loading，并在实际开发中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/135956