element-ui dialog loading

1. 指令方式
2. 服務方式
3. v-loading

當使用指令方式時，全屏遮罩需要添加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>

## Loading.service(options);


```js

refs

https://element.eleme.io/#/zh-CN/component/loading

https://github.com/ElemeFE/element/issues/5052

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---