element/examples/docs/loading.md

Loading 加载

加载数据时显示动效

基本用法

:::demo 在 Loading 组件中，Element 准备了自定义命令v-loading，只需要绑定Boolean即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。

<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>

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

:::

修饰符

通过修饰符，我们可以使用全屏幕 Loading 或将 Loading 设置在 body 上。

:::demo Loading 遮罩默认插入至绑定了 v-loading 指令的元素上。通过添加 body 修饰符，可以使遮罩插入至 DOM 中的 body 上。当需要全屏遮罩时，可使用 fullscreen 修饰符（此时遮罩会插入至 body 上）

<template>
  <el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>

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

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

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

:::