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

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

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

  1. 既然我们是在请求的时候加上一个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);	
          }
        });
    },
  1. 接下来看一下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里面自带的图库的

  1. 接下来就是我们自定义我们的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;
}
  1. 接下来在 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,可以的。 首先,我们需要知道 `vue-lazyload` 是一个 Vue 插件,它提供了一个指令 `v-lazy`,可以用来实现图片懒加载。它的使用方式如下: ```html <img v-lazy="imgUrl"> ``` 其中,`imgUrl` 是图片的地址。当图片进入可视区域时,`v-lazy` 指令会自动将 `img` 标签的 `src` 属性设置为 `imgUrl`,从而实现图片的加载。 接下来,我们可以封装一个自定义指令,来简化 `v-lazy` 的使用。 ```js import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { loading: require('@/assets/loading.gif') }) Vue.directive('lazy', { bind: (el, binding) => { el.setAttribute('data-src', binding.value) el.setAttribute('src', require('@/assets/loading.gif')) }, inserted: el => { const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { const imgSrc = el.getAttribute('data-src') el.setAttribute('src', imgSrc) observer.disconnect() } }) observer.observe(el) } }) ``` 上面的代码中,我们使用 `Vue.directive` 方法定义了一个名为 `lazy` 的自定义指令。该指令的作用和 `v-lazy` 相同,用于实现图片的懒加载。 在自定义指令的 `bind` 钩子函数中,我们获取了图片的地址,并将其设置为 `data-src` 属性的值。同时,我们将 `src` 属性的值设置为一个占位图,这里使用了一个 loading 图片。 在自定义指令的 `inserted` 钩子函数中,我们使用了 `IntersectionObserver` API 来观察图片是否进入了可视区域。当图片进入可视区域时,我们将 `src` 属性的值设置为 `data-src` 属性的值,从而实现图片的加载。 最后,我们使用 `Vue.use` 方法将 `vue-lazyload` 插件安装到 Vue 中,并设置了一个全局的 loading 图片。 接下来,在 Vue 模板中,就可以使用我们自定义的指令了: ```html <img v-lazy="imgUrl"> ``` 其中,`imgUrl` 是图片的地址。 希望这个例子能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值