什么是@beisen-platform/loading?
@beisen-platform/loading是一款用于在前端页面中添加加载动画的npm包。 该包提供了多种预先设计好的加载动画和灵活的配置选项，方便开发人员在不同的页面场景中使用。
安装
使用npm安装@beisen-platform/loading：
npm install @beisen-platform/loading --save
使用
基本使用
import loading from '@beisen-platform/loading'; // 显示加载动画 const cancelLoading = loading.open(); // 隐藏加载动画 cancelLoading();
在以上代码中，使用loading.open()函数将显示默认的加载动画，生成并返回一个取消动画的函数，调用该函数即可随时隐藏加载动画。
配置项
可以通过传入参数来配置加载动画样式和行为。以下是可以配置的选项：
| 选项 | 类型 | 描述 |
|---|---|---|
| type | string | 加载动画的类型（默认为'block'） |
| color | string | 加载动画颜色（默认为'#666'） |
| text | string | 显示在加载动画下方的文本（默认为'加载中'） |
| mask | boolean | 是否在加载动画上面添加蒙层（默认为true） |
| maskColor | string | 蒙层的颜色（默认为'rgba(0,0,0,0.3)'） |
| backgroundColor | string | 加载动画容器背景颜色（默认为'#fff） |
-- -------------------- ---- ------- -- --------- ----- ------------- - -------------- ----- ------- ------ ---------- ----- -------------- ----- ----- ---------- ---------- ---- ---- ------ ---------------- --------- --- -- --------- ----------------
在以上代码中，我们配置了加载动画类型为'spin'（旋转图案）、颜色为绿色、文本为'正在加载，请稍后...'、添加蒙层、蒙层颜色为半透明白色、加载动画容器背景颜色为浅灰色。生成并返回一个取消动画的函数，调用该函数即可随时隐藏加载动画。
加载动画类型
@beisen-platform/loading内置了多种加载动画类型，可以通过配置'type'选项来切换动画类型。以下是可用的类型：
| 类型 | 描述 |
|---|---|
| block | 块状图形的加载动画 |
| spin | 旋转图案的加载动画 |
| points | 圆点的加载动画 |
| wave | 波浪形的加载动画 |
| spiral | 螺旋的加载动画 |
| chasingDots | 追踪点的加载动画 |
| bar | 条形的加载动画 |
| circular | 圆形的加载动画 |
| cube | 立方体的加载动画 |
| fade | 渐隐的加载动画 |
| scaleCircle | 缩放的加载动画 |
| pulse | 脉冲的加载动画 |
| heartbeat | 心跳的加载动画 |
| chasingRing | 圆圈内持续不断的动画 |
| threeStrings | 3个跑步图标的动画 |
| rotatingStrings | 旋转的3个跑动图标动画 |
| bouncingBalls | 共3个弹跳的圆球 |
| spinningLines | 三个平行的旋转线 |
| spinner | 一组调和的变换图形 |
| atom | 电子的动画效果 |
| clock | 模拟实现的时钟动画 |
| orbit | 模拟地球绕日的动画 |
| bird | 飞鸟的动画效果 |
| circleStrokeSpin | 圆形个线来回旋转的动画 |
| rectStrokeSpin | 矩形线来回旋转的动画 |
| roundBouncing | 挤压圆球动画 |
例如，要使用旋转图案的加载动画，可以这样配置：
const cancelLoading = loading.open({ type: 'spin' });在Vue中使用
在Vue中，我们可以将loading组件封装成全局组件，方便在Vue的各个组件中使用。
1. 注册loading组件
创建一个Loading.vue 组件，代码如下：
-- -------------------- ---- -------
----------
---- ----------------------- -----------------
---- ----------------
-- ----------------------- - ----- --
----- ----------------------- ---- ---------
------
------
-----------
--------
------ ------- -
------ -
-------- --------
----- -
-------- --------
----- ------
--
----- -
-------- ------
----- ------
--
------ ------
-
--
---------
------ -------
---------------- -
-------- -----
------- -----
------ -----
--------- ------
---- --
----- --
-------- ------
---------------- -------
------------ -------
----------- ------- -- -- -----
----------- -------
-
-------- -
-------- -----
--------------- -------
---------------- -------
------------ -------
----------------- -----
-------- -----
-------------- ----
----------- - --- ---- ------- -- -- ------
-
------------------- -
------ -----
------- -----
-------------- ----
----------------- -----
------------- ----
-------- -------------
---------- ------------- --- ----------- ---- ---------
-
------------------ -
------ -----
------- -----
-------------- ----
----------- --- ----- --------
------------- --- ----- --------
-------------- --- ----- --------
------------ --- ----- -----
---------- ------------ ---- ------ ---------
-
-------------------- -
----------- -----
-
-------------------- --- -
-------- -------------
------ ----
------- ----
------- - ----
-------------- ----
----------------- -----
---------- -------------- ---- ----------- ---- ---------
-
------------- -
----------- -----
---------- -----
------ -----
-
---------- ------------- -
-- -
---------- ---------
-
--- -
---------- -------- -----
-
--- -
---------- ---------
-
-
---------- ------------ -
-- -
---------- --------------
-
---- -
---------- ----------------
-
-
---------- -------------- -
-- -
---------- ---------
-
--- -
---------- ----------
-
----
---- -
---------- ---------
-
-
--------把此组件封装全局组件并绑定到Vue实例中：
import Loading from './Loading.vue';
Vue.use(Loading, {
color: '#4CAF50',
type: 'spin'
});Vue.use注入组件之后，你就可以在所有Vue组件中使用了。
2. 在创建好的全局组件中添加配置的选项
import loading from '@beisen-platform/loading'; import MyLoading from './Loading.vue'; Vue.use(MyLoading); Vue.prototype.$loading = loading;
3. 在Vue组件中使用
在Vue组件中使用时，你可以像这样渲染你的Loading组件：
-- -------------------- ---- -------
----------
-----
------- ---------------------------------------
------- ----------------------------------------
------
-----------
--------
------ ------- -
-------- -
------------- -
--------------------
----- -------
------ ----------
----- --------------
----- -----
---------- ---------- ---- ---- ------
---------------- ---------
---
--
-------------- -
----------------------
-
-
-
---------在以上代码中，我们在页面上添加了两个按钮，点击按钮一将显示loading，点击按钮二将隐藏loading。
结言
@beisen-platform/loading是一款方便易用的前端加载动画插件，在基础用法上，需要具有一定JavaScript开发基础即可使用。对于Vue开发者，我们可以在组件中对其进行封装，从而实现方便快捷地在Vue项目中使用。无疑，这款插件为我们前端开发提供了一种简单，高效的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/134348