当前位置: 首页 > 工具软件 > v-button > 使用案例 >

v-loading加载中

楚嘉纳
2023-12-01

一、整页加载

使用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-spinnerelement-loading-background属性分别用来设定图标类名和背景色值。

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

更多详情,请查看:element-ui 之 loading 组件

 类似资料: