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