前言
在前端开发中，有些时候我们需要加入一些 loading 效果来增强用户体验。vue-custom-loading 是一个 npm 包，可以帮助我们实现可定制的 loading 效果。它为 Vue 组件提供了一些定制化的API，让我们能够很轻松地实现自己的 loading 效果。
安装
在使用 vue-custom-loading 前，需要安装它。使用以下命令安装：
npm i vue-custom-loading
快速上手
引入组件
在 main.js 文件里引入：
import Vue from 'vue' import VueCustomLoading from 'vue-custom-loading' Vue.use(VueCustomLoading)
在组件中使用
在需要使用 loading 效果的组件中，可以这样使用：
-- -------------------- ---- -------
----------
-----
---- ----- ------- ------- ---
----------------- --------------------
-----------------
-----------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ----
-
--
--------- -
-- ----- ------- --
------------- -- -
------------ - -----
-- -----
-
-
---------参数
在上面的示例代码中，我们仅仅设置了一个 loading 参数，它是 Boolean 类型，表示是否显示 loading 效果。vue-custom-loading 还支持其他的参数，下面列举一下：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| color | String | #000 | 自定义 loading 效果的颜色 |
| type | String | ball-triangle-path | 自定义 loading 效果的类型 |
| size | Number | 60 | 自定义 loading 效果尺寸 |
| text | String | Loading... | 自定义 loading 效果的文字 |
高级用法
修改默认参数
我们可以在 main.js 文件里设置 vue-custom-loading 的默认参数，为其它组件提供全局配置：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ---------------- ---- -------------------- ------------------------- - ------ ---------- ----- --------------- ----- --- ----- ------- -------- --
定制自己的 loading 效果
我们也可以自定义自己的 loading 效果。下面举个例子：
-- -------------------- ---- -------
----------
---- -----------------
---- ----------------------
---- ---------------------------
------
-----------
--------
------ ------- -
----- ----------------
------ -
----- ------ -- --
-
-
---------
-------
--------- -
--------- ---------
-------- -----
--------------- -------
---------------- -------
------------ -------
------- -----
-
-------- -
-------- -------------
--------- ---------
------ -----
------- -----
-
-----------------
--------------- -
-------- ---
--------- ---------
---- --
----- --
------ -----
------- -----
-------------- ----
-------- ----
----------- ----- - --- - --------- ---- ---- -----
- --- - ------- -- -- -----
---------- ------- -- -------- -------
-
---------------- -
----------------- -----
-
--------------- -
----------------- --------
---------------- ----
-
----- -
------ -----
---------- -----
----------- -----
-
---------- ------- -
-- -
---------- --------------
-
---- -
---------- ----------------
-
-
--------引用组件：
-- -------------------- ---- -------
----------
-----
-------------- ------------------- --------------------
-----------------
-----------
------
-----------
--------
------ ------------- ---- --------------------------------
------ ------- -
------ -
------ -
-------- -----
------------ -------
-
--
----------- -
-------------
--
--------- -
------------- -- -
------------ - -----
-- -----
-
-
---------结语
vue-custom-loading 是一个非常实用的 npm 包，可以帮助我们快速构建可定制的 loading 效果。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737a81e8991b448e96ad