ElementUI的loading状态的使用

局部loading

1. 找到相应的结构
   1. 一般那个盒子需要loading状态，就在那个盒子上加上 v-loading="loading"
   2. loading 是vue data中绑定的数据
2. 修改loading的样式与状态
   1. 状态只需要修改loading的布尔值就可以了
   2. 样式的修改，如果是局部的只能通过修改标签的属性如下(使用了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方式比较灵活，直接写在函数中就行，需要如下的两个条件

1. 选中盒子
2. 进行配置

<div class="box"></div> 

methods: {
    handleClick() {
      this.$loading({
        target: ".box",
        text: "Loading...",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
},

• this.$loading返回一个对象，我们需要调用返回对象的loading close方法才可以关闭