ElementUI：组件库之Loading 加载

目录

• ​​以指令的方式调用​​
• ​​以服务的方式调用​​
• ​​完整引入了 Element​​

以指令的方式调用

<template>
  <div v-loading="loading"></div> 
</template>

<script>
  export default {
    data() {
      return {
        loading: true
      };
    }
  };
</script>

以服务的方式调用

import { Loading } from 'element-ui';

let loading = Loading.service({ 
    fullscreen: true,
    lock: true,
    text: '加载中'
});

setTimeout(() => {
   loading.close()
}, 1000);

完整引入了 Element

let loading = this.$loading({ 
    fullscreen: true,
    lock: true,
    text: '加载中'
})

// 以服务的方式调用的 Loading 需要异步关闭
this.$nextTick(() => { 
  loading.close();
});