Api

el-loading

基本用法

打开 / 关闭 loading


点击上面的按钮，本区域显示 loading 遮罩


1
2
3
4
5

<el-button :plain="true" v-on:click="loading = !loading">打开 / 关闭 loading</el-button>

<div v-loading="loading" class="el-loading-demo">
  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div>

修饰符

loading 遮罩默认插入至绑定了 v-loading 指令的元素上。通过添加 body 修饰符，可以使遮罩插入至 body 上

打开 / 关闭 loading


点击上面的按钮，本区域显示 loading 遮罩


1
2
3
4
5

<el-button :plain="true" v-on:click="loading2 = !loading2">打开 / 关闭 loading</el-button>

<div v-loading.body="loading2" class="el-loading-demo">
  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div>

当需要全屏遮罩时，可使用 fullscreen 修饰符（此时遮罩会插入至 body 上）

打开全屏 loading

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
  <el-button
    :plain="true"
    v-on:click="openFullScreen"
    v-loading.fullscreen="fullscreenLoading">
    打开全屏 loading
  </el-button>
</template>

<script>
  export default {
    data() {
      return {
        fullscreenLoading: false
      }
    }
    methods: {
      openFullScreen() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 2000);
      }
    }
  }
</script>