element ui loading的用法

ElementUI是一个基于Vue.js的跨平台UI框架，由饿了么前端团队开发。它提供了丰富的组件、可以快速构建各类Web前端应用。其中，loading加载组件是一种常用的组件，可以大大提升用户体验。本文将详细介绍Element UI中loading组件的用法。 ###一、什么是Loading

Loading是一种非常经典的用户界面设计模式，被广泛应用于Web前端应用。当页面发生跳转或者数据请求时，用户可以在等待数据请求完成之前看到一个提示信息Loading，它可以帮助用户知道正在发生什么，系统正在工作中。 ###二、Element UI Loading的用法 （1）基本使用

Element UI Loading组件非常简单，可以通过以下两种方式来使用。

在Vue实列中添加``````标签： ```html

```

在实例中引入Loading组件： ```javascript

- 1 -

import { Loading } from element-ui Vue.use(Loading) ```

在js中调用： ```javascript this.$loading({ fullscreen:true, spinner: dotted text: 加载中...

background: rgba(0, 0, 0, 0.8) }) ```

（2）全局设置

Element UI提供了一种全局设置Loading组件的使用方法，可以在Vue实例中设置全局属性： ```javascript Vue.use(Loading, { fullscreen:true, spinner: dotted text: 加载中...

background: rgba(0, 0, 0, 0.8) })

- 2 -

```

这样，以后每次使用Loading组件时，就可以省略这些参数，直接调用即可： ```javascript this.$loading() ```

（3）定义Loading实例

Element UI还允许你定义Loading实例，以便在复杂的业务场景下使用： ```javascript //义一个Loading实例

const loadingInstance = Loading.service({ fullscreen:true, spinner: dotted text: 加载中...

background: rgba(0, 0, 0, 0.8) })

// 使用该实例进行加载 loadingInstance.show() ```

（4）参数说明

Element UI中loading组件支持多种参数设置，可以定制出多

- 3 -

种loading样式：

* fullscreen：是否全局loading，默认为false； * text：loading提示文字，默认为“加载中...”；

* spinner：loading旋转图案，默认为“dotted”，可选值有：“dotted”、“circle”等；

* background：loading背景色，默认为“rgba(0, 0, 0, 0.8)”。 ###三、总结

用户界面Loading是一种常用的设计模式，它可以帮助用户了解系统正在发生的事情，减少系统的等待时间。Element UI的loading组件可以非常方便、快捷的构建多种loading界面，提升用户体验。

- 4 -