使用v-loading在接口为请求到数据之前,显示加载中,直到请求到数据后消失。
//全局loading
<template>
<div v-loading="loading"> </div>
</template>
在data 中定义初始化, loading: false,同时在mounted()中将 this.loading设置为true,再去请求接口
在接口的回调函数中,将 this.loading 设为false,到达效果。
当使用指令方式时,全屏遮罩需要添加fullscreen
修饰符(遮罩会插入至 body 上),此时若需要锁定屏幕的滚动,可以使用lock
修饰符;当使用服务方式时,遮罩默认即为全屏,无需额外设置。
指令方式:
<el-button
type="primary"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
指令方式
</el-button>
服务方式:
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
通常我们在 axios 拦截器中,使用服务指令来全局添加 loading 信息。
// 新增蒙层
var loading
// request拦截器
$http.interceptors.request.use(config => {
if (config.loading !== false) { // 可配置不用蒙层,参考 src/api/base/goods.js 中 getPageQuery 方法。
// 新增接口请求时蒙层
loading = window.vm.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
})
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
如果写在template下的顶层元素上的话,就不会触发全屏loading
//局部loading
<template>
<div>
<section v-loading="loading"></section>
</div>
</template>
在绑定了v-loading
指令的元素上添加element-loading-text
属性,其值会被渲染为加载文案,并显示在加载图标的下方。类似地,element-loading-spinner
和element-loading-background
属性分别用来设定图标类名和背景色值。
<el-main
v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0.5)"
element-loading-text="图标正在加载中"
>
......
</el-main>
更多详情,请查看:element-ui 之 loading 组件。