介绍
vue-loadings 是一个基于 Vue.js 的 npm 包，它可以为 Vue.js 应用程序提供加载中、成功和失败的状态。
安装
通过 npm 安装 vue-loadings 包。
npm install vue-loadings --save
引入
在 Vue.js 应用程序的入口文件中引入 vue-loadings。
import Vue from 'vue' import VueLoadings from 'vue-loadings' Vue.use(VueLoadings)
使用
在 Vue.js 组件中使用 vue-loadings。
加载中
<vue-loadings type="loading" text="加载中..." />
成功
<vue-loadings type="success" text="加载成功" />
失败
<vue-loadings type="error" text="加载失败" />
配置
vue-loadings 提供了一些自定义配置选项，可以在安装时传递给 VueLoadings.install 方法。
Vue.use(VueLoadings, {
delay: 300, // 延迟显示加载中状态的时间，默认值为 0
duration: 1000, // 加载成功或失败状态的显示时间，默认值为 1500
size: 40, // 加载组件的大小，默认值为 30
color: '#000000', // 加载组件的颜色，默认值为 #ffffff
textColor: '#000000' // 加载组件文本的颜色，默认值为 #ffffff
})示例代码
以下是一个完整的示例代码。
-- -------------------- ---- -------
----------
-----
------- -------------------------------
------------- -------------- -------------- ------------- --
------------- -------------- -------------- ----------- --
------------- ------------ ------------ ----------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------
-------- ------
------ -----
-
--
-------- -
---------- -
------------ - ----
------------- -- -
----- ------ - -------------
-- ------- - ---- -
------------ - ----
- ---- -
---------- - ----
-
------------ - -----
-- -----
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607781e8991b448de9e8