局部loading
- 找到相应的结构
- 一般那个盒子需要loading状态,就在那个盒子上加上
v-loading="loading"
- loading 是vue data中绑定的数据
- 一般那个盒子需要loading状态,就在那个盒子上加上
- 修改loading的样式与状态
- 状态只需要修改loading的布尔值就可以了
- 样式的修改,如果是局部的只能通过修改标签的属性如下(使用了v-loading)
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
整页的loading
- 需要在 v-loading上加上修饰符
v-loading.fullscreen.lock="fullscreenLoading"
实例
标签方式
- html
<div class="list" v-loading="loading" element-loading-text="拼命加载中">
- js
data:{
loading:false,
}
open(){
this.loading = true;
}
js方式
js方式比较灵活,直接写在函数中就行,需要如下的两个条件
- 选中盒子
- 进行配置
<div class="box"></div>
methods: {
handleClick() {
this.$loading({
target: ".box",
text: "Loading...",
background: "rgba(0, 0, 0, 0.7)",
});
},
},
- this.$loading返回一个对象,我们需要调用返回对象的loading close方法才可以关闭