首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

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

Sonder
2021-09-15
2998字
7分钟
浏览 (4.7k)

文章目的

今天我们就要带大家实现,在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)
}

效果如下

转载:https://zhuanlan.zhihu.com/p/406487830

下一篇 / vue路由参数变更刷新当前页面

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)