v-loading加载中

一、整页加载

使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。

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

在data 中定义初始化， loading: false，同时在mounted()中将 this.loading设置为true,再去请求接口

在接口的回调函数中，将 this.loading 设为false，到达效果。

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

指令方式：

<el-button
  type="primary"
  @click="openFullScreen1"
  v-loading.fullscreen.lock="fullscreenLoading">
  指令方式
</el-button>

服务方式：

openFullScreen2() {
  const loading = this.$loading({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  setTimeout(() => {
    loading.close();
  }, 2000);
}

通常我们在 axios 拦截器中，使用服务指令来全局添加 loading 信息。

// 新增蒙层
var loading

// request拦截器
$http.interceptors.request.use(config => {
  if (config.loading !== false) {  // 可配置不用蒙层，参考 src/api/base/goods.js 中 getPageQuery 方法。
    // 新增接口请求时蒙层
    loading = window.vm.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

二、局部加载

如果写在template下的顶层元素上的话，就不会触发全屏loading

//局部loading
<template>
    <div> 
        <section v-loading="loading"></section>
    </div>
</template>

三、自定义

在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。

<el-main
  v-loading="loading"
  element-loading-background="rgba(0, 0, 0, 0.5)"
  element-loading-text="图标正在加载中"
>
  ......
</el-main>

更多详情，请查看：element-ui 之 loading 组件。