千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 手把手带你用vue实现全屏loading插件

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

来源:千锋教育
发布人:wjy
时间: 2022-06-06 11:33:00 1654486380

## 前言:

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

手把手带你用实现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>
 <!--
  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中获取单文件组件 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培训服务经验,采用全程面授高品质、高体验培养模式,拥有国内一体化教学管理及学员服务,助力更多学员实现高薪梦想。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT