vue-resource请求前loading(自定义图片)

最新推荐文章于 2023-02-04 10:39:42 发布

Hizzyellow

最新推荐文章于 2023-02-04 10:39:42 发布

阅读量616

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Hizzyellow/article/details/127589687

版权

Vue-resource请求前添加loading事件(并且上传自己的图片)

相信很多同学有着像我一样的需求,当我们页面请求数据渲染的时候,当我们的数据还没有拿到的时候,页面会显示类似空白的操作,这种对用户来说是一种非常不好的体验,所以这篇文章就是解决这一个问题,在我们还没有请求成功的时候加上一个loading(加载中的效果)。让我们开始吧
这里我们要用到element-ui的el-loading,这里就不带着大家安装了

既然我们是在请求的时候加上一个loading,所以我们先来看一下请求的部分

getDiscountCheck() {
      this.loading = true; // 这个就是loading的开始
      this.$http
        .get(url)
        .then((res) => {
          this.canUseCouponCode = res.ok;
          this.showComponent = res.body.success;
          this.msg = res.body.data.message;
          console.log(this.msg);
          if (res.status === 200) { // 当请求成功的时候
            setTimeout(() => { // 我们再加一个定时器,2s后设置loading为false,就是取消loading的显示了
              this.loading = false;
            }, 2000);	
          }
        });
    },

接下来看一下div的部分

<template>
  <div
    class="loading-wrapper"
    v-loading.fullscreen.lock="loading" // 这个就是loading整个页面覆盖
    element-loading-background="rgba(0, 0, 0, 0.1)" // 背景透明度
  >
  </div>
</template>

这个时候就不要写element-loading-spinner=“el-icon-loading”,这里是用element-ui里面自带的图库的

接下来就是我们自定义我们的loading图片我们首先在assets目录下新建一个css目录, 再新建一个例如myCss.css的文件

.el-loading-spinner {
  /*这个是自己想设置的 gif 加载动图*/
  background-image: url('...'); // 自己设置噢
  background-repeat: no-repeat;
  background-size: 200px 120px;
  height: 100px;
  width: 100%;
  background-position: center;
  /*覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了*/
  top: 40%;
}

.el-loading-spinner .circular {
  /*隐藏 之前  element-ui  默认的 loading 动画*/
  display: none;
}

.el-loading-spinner .el-loading-text {
  /*为了使得文字在loading图下面*/
  margin: 85px 0px;
}

接下来在 main.js中引入自定义的样式文件，一定要在引入elementUI之后，引入自定义样式

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import _ from 'lodash';
import axios from 'axios';
import VueResource from 'vue-resource';

// 自定义element-ui loading样式
import './assets/css/myCss.css'

看一下效果图吧
在这里插入图片描述

完整代码

<template>
  <div
    class="loading-wrapper"
    v-loading.fullscreen.lock="loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
  >
    >
  </div>
</template>

<script>
export default {
  created() {
    this.getDiscountCheck();
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    getDiscountCheck() {
      this.loading = true;
      this.$http
        .get("url")
        .then((res) => {
          this.canUseCouponCode = res.ok;
          this.showComponent = res.body.success;
          this.msg = res.body.data.message;
          console.log(this.msg);
          if (res.status === 200) {
            setTimeout(() => {
              this.loading = false;
            }, 2000);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>