在前端开发中，我们经常需要对页面或者某个元素进行加载状态的提示，比如说页面正在加载中，或者某个按钮被点击后正在请求数据。为了方便起见，我们可以使用一款名为 app-element-loading 的 npm 包，它可以帮助我们快速地实现这些功能。
安装
使用 npm 包管理工具进行安装：
npm install app-element-loading --save
使用
app-element-loading 支持 amd、cjs、esm 和 iife 四种模块类型。在使用时，我们可以通过以下三种方式引入：
- 引入 app-element-loading 的 css 文件：
<link rel="stylesheet" href="path/to/node_modules/app-element-loading/dist/css/AppElementLoading.css" />
- 引入 app-element-loading 的 js 文件：
<script type="module" src="path/to/node_modules/app-element-loading/dist/js/AppElementLoading.js"></script>
- 模块化引入：
import AppElementLoading from 'app-element-loading';
然后我们就可以在页面中使用 app-element-loading 了。
API
使用 app-element-loading 有以下三种方式：
- 直接使用页面加载效果
- 对某个元素进行加载效果
- 高级用法（组件方式）
直接使用页面加载效果
在页面中，我们可以直接使用以下代码来显示加载效果：
AppElementLoading.show();
隐藏加载效果：
AppElementLoading.hide();
如果我们要自定义加载效果的样式，可以在 app-element-loading 的导入文件中通过执行下面的代码进行设置：
-- -------------------- ---- -------
--------------------------
------------- -
---------- --
----------- ---------- ---- ---- -----
--------- ----------
----------- ------
----- ---
-------- -
-------- -----
--------- -----
------- ----------------
-
--
---对某个元素进行加载效果
在页面中，我们有时候需要对某个元素进行加载效果。此时我们可以使用以下 API：
AppElementLoading.for(document.getElementById('my-id')).show();隐藏元素的加载效果：
AppElementLoading.for(document.getElementById('my-id')).hide();高级用法（组件方式）
在一些情况下，我们需要在多个页面中都使用加载效果，此时可以使用 app-element-loading 提供的组件方式。在组件使用时，我们可以按照以下步骤进行操作。
- 在根组件中，import app-element-loading 组件并通过 Vue.use() 方法来启用当前组件：
-- -------------------- ---- -------
------ --- ---- ------
------ ----------------- ---- ----------------------
------ -----------------------------------------------------
-------------------------- -
------------- -
---------- --
----------- ---------- ---- ---- -----
--------- ----------
----------- ------
----- ---
-------- -
-------- -----
--------- -----
------- ----------------
-
-
--- 在需要显示加载效果的地方使用
v-loading指令：
-- -------------------- ---- -------
----------
-----
---- --------------------------- -------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -----
--
--
--------- -
------------- -- -
------------ - ------
-- ------
--
--
---------示例代码
以下是使用 app-element-loading 实现按钮加载状态的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------- ---------------
----- ---------------- --------------------------------------------------------------------------- --
-------
------- -
----------- -----
-------- ---- -----
----------- --------
------ -----
---------- -----
------- --- ----- --------
-------------- ----
-
--------------- -
--------- ---------
------ ------------
--------------- -----
------- -----
-
---------------------- -
-------- ---
-------- ------
--------- ---------
---- ----
----- ----
------ -----
------- -----
------- ---- - - -----
------- --- ----- -----
----------------- ------------
-------------- ----
---------- ---- --- ------------------ ------ ------ ----- ---------
-
---------- ---- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
-
--------
-------
------
---- ----------
------- ----------- -------------------- ----------------- --------------------------
------
------- ----------------------------------------------------------------------------------
--------
--- --- - -
------ -
------ -
-------- ------
-
--
-------- -
------------- -
-- -------------- -
------ ------
-
------------ - -----
------------- -- -
------------ - ------
-- ------
-
-
--
----------------------------------
---------
-------
-------以上就是使用 app-element-loading 进行加载状态提示的详细教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ff81e8991b448d5219