手摸手带你用实现vue全屏loading插件
Sonder
2021-09-15
2998字
7分钟
浏览 (4.9k)
文章目的
今天我们就要带大家实现，在vue开发的前后端分离应用中，实现在网页加载以及刷新时，实现如上图全屏loading的效果!
功能分析
vue项目中所有的请求一般都是通过axios，所以我们需要给axios新增请求和响应拦截，在请求拦截中显示loading,和响应拦截中关闭loading。所以我们需要定义两个全局方法，一个是显示loading，叫$showLoading(),另一个叫$hideLoading()关闭全屏loading。
代码实现
上面的梳理，我们明确了，需要定义两个全局方法，一个显示loading一个关闭loading，这里我们定义一个Vue的插件通过插件动态给实例安装 显示和关闭Loading方法。定义$loading插件，在Vue构造函数原型上添加两个方法以下loading.js代码
loading.vue
loading.js中获取单文件组件 html结构 并在 $showLoading方法调用时显示,在$hideLoading时隐藏
<template>
<!--
mask是loading的背景 v-show控制loading显示消失
-->
<div class="mask" v-show="isShow">
<div class="loading"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
// loading默认不显示
isShow: false
}
}
}
</script>
<style lang="scss">
// 定义动画 控制 loading旋转
@keyframes rotate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.mask{
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
background-color: rgba(0,0,0,.7);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
.loading{
width: 30px;
height: 30px;
border: 6px solid rgb(219, 140, 13);
border-radius: 21px;
border-left-color:transparent;
animation: rotate 500ms infinite;
}
}
</style>loading.js中
import LoadingVue from './loading.vue'
const $loading = {
install: (Vue) => {
// 通过 Vue.extend方法 获取LoadingComponent 组件 类
const LoadingComponent = Vue.extend(LoadingVue);
// new LoadingComponent得到组件的实例
const vm = new LoadingComponent();
// 获取组件实例的html 并插入到body中
const tpl = vm.$mount().$el;
// 插入到body中
document.body.appendChild(tpl);
// 添加 显示loading方法
Vue.prototype.$showLoading = () => {
// 通过改变实例 .mask v-show绑定变量控制显示
vm.isShow = true
}
// 添加关闭loading方法
Vue.prototype.$hideLoading = () => {
// 通过改变实例 .mask v-show绑定变量控制隐藏
vm.isShow = false
}
}
}
export default $loading;最后在main.js中使用插件 在axios拦截器中控制显示隐藏就ok啦！
main.js
import Vue from 'vue'
import loading from './plugins/loading'
Vue.use(loading)// 构造函数原型上就添加了$showLoading和$hideLoading方法axios拦截器中使用
import Vue from 'vue'
// 定义Vue实例 调用全局显示和关闭loading方法
const vm = new Vue()
// 请求拦截
axios.interceptors.request.use(function (config) {
// 在这里调用 显示loading方法
vm.$showLoading()
return config
}, function (error) {
vm.$hideLoading()
// 在请求出错调用 关闭loading方法
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(function (response) {
// 在这里调用 关闭loading方法
vm.$hideLoading()
return response
}, function (error) {
// 在这里调用 关闭loading方法
vm.$hideLoading()
return Promise.reject(error)
}效果如下
