什么是 npm 包 vue-alert-loading?
npm 包 vue-alert-loading 是一个 Vue 组件，可以帮助开发者在页面中显示一个加载等待的效果。
安装
npm install vue-alert-loading --save
使用
- 在需要使用 vue-alert-loading 的页面或组件引入该组件
import Vue from 'vue' import VueAlertLoading from 'vue-alert-loading' Vue.use(VueAlertLoading)
- 在需要使用 vue-alert-loading 的地方使用 <vue-alert-loading> 标签包裹内容
<template>
<div>
<h1>这是一个使用了 vue-alert-loading 的页面</h1>
<vue-alert-loading>
<p>这是需要等待的内容</p>
</vue-alert-loading>
</div>
</template>参数
vue-alert-loading 组件可以接受以下参数：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| loadingMessage | String | '加载中…' | 加载时显示的文本内容 |
| loadingBgColor | String | '#fff' | 加载时背景的颜色，需指定 css 的颜色格式，例如：'#eee' |
<template>
<div>
<h1>这是一个使用了自定义参数的 vue-alert-loading 的页面</h1>
<vue-alert-loading :loading-message="'自定义加载中...'" loading-bg-color="#eee">
<p>这是需要等待的内容</p>
</vue-alert-loading>
</div>
</template>代码示例
以下是一个简单的示例，展示了如何使用 vue-alert-loading 在页面中显示加载等待效果：
-- -------------------- ---- -------
----------
-----
----------- ----------------- --------
-------------------
----------------
--------------------
------
-----------
--------
------ --- ---- -----
------ --------------- ---- -------------------
------------------------
------ ------- -
----- ---------
-
---------结束语
npm 包 vue-alert-loading 简单易用，可以帮助我们的页面展示更好的用户体验。希望这篇教程对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567e381e8991b448e411b