手把手带你用vue实现全屏loading插件

## 前言：

由于我们打开网页时，浏览器与服务器交互需要时间，受限于宽带以及服务器性能，导致用户在访问一个网页时，往往需要一个等待期，才能在浏览器中真正完全展示出网页内容。在网页加载过程中网页就是一片空白，对于我们用户而言，我们看到一片空白，还以为网站 "挂掉了"，就很忧伤！！

当然了，我们针对这个问题，各大网站都有自己的解决方案。

有的网站会用骨架屏。

比如掘金:利用骨架屏，给用户提醒，网站内容马上呈现给您，不要着急!

有的网站会选择在数据出来之前定义一个全屏的loading，提供用于网站正在加载

比如：网站在加载时以及网站刷新时，会弹出全屏loading。

## 文章目的：

今天我们就要带大家实现，在vue开发的前后端分离应用中，实现在网页加载以及刷新时，实现如上图全屏loading的效果!

### 功能分析

vue项目中所有的请求一般都是通过axios，所以我们需要给axios新增请求和响应拦截，在请求拦截中显示loading,和响应拦截中关闭loading。

所以我们需要定义两个全局方法，一个是显示loading，叫$showLoading(),另一个叫$hideLoading()关闭全屏loading。

### 代码实现

上面的梳理，我们明确了，需要定义两个全局方法，一个显示loading一个关闭loading，这里我们定义一个Vue的插件通过插件动态给实例安装显示和关闭Loading方法。

- 定义$loading插件，在Vue构造函数原型上添加两个方法

以下loading.js代码

```text
const $loading = {
    install: (Vue) => {
        // 添加显示loading方法
        Vue.prototype.$showLoading = () => {
            console.log('loading显示')
        }
        // 添加关闭loading方法
        Vue.prototype.$hideLoading = () => {
            console.log('loading关闭')
        }
    }
}
export default $loading;
// 使用时在main.js入口函数中引入使用插件即可安装
Vue.use($loading)
```

- 添加axios请求和响应拦截，调用显示和关闭loading方法

```text
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)
}
```

此时首页有三次请求，显示了三次loading显示和loading关闭！

当然我们在数据请求不是打印，而是显示loading，数据过来时应该关闭loading,所以接下来我们实现这两个效果

- 通过单文件组件定义显示loading结构

我们目前的问题是，在显示loading时不是打印而是要显示全局loading的html结构，在关闭loading时要隐藏!

为了实现这个需求，我们通过vue的单文件组件来定义loading的html结构和控制loading显示隐藏

loading.vue

```text
<template>

<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中获取单文件组件 html结构并在 $showLoading方法调用时显示,在$hideLoading时隐藏

loading.js中

```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
        }
    }
}
```

最后在main.js中使用插件在axios拦截器中控制显示隐藏就ok啦！！

main.js

```js
import Vue from 'vue'
import loading from './plugins/loading'
Vue.use(loading)// 构造函数原型上就添加了$showLoading和$hideLoading方法
```

axios拦截器中使用

```js
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)
}
```

是不是很棒，好啦我们的vue全屏loading插件到这里就完成了，小伙伴们回去试一试吧。

更多关于 web培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年 IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。