整页加载
页面数据加载时显示。
当使用指令方式时,全屏遮罩需要添加fullscreen
修饰符(遮罩会插入至 body 上),此时若需要锁定屏幕的滚动,可以使用lock
修饰符;当使用服务方式时,遮罩默认即为全屏,无需额外设置。
<template>
<el-button
type="primary"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
指令方式
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
服务方式
</el-button>
</template>
<script>
export default {
data() {
return {
fullscreenLoading: false
}
},
methods: {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
</script>