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>