vue 全局封装loading加载教程(全局监听)

接下来我将为你详细讲解“vue 全局封装loading加载教程(全局监听)”的完整攻略。

如何全局封装loading加载？

一、创建 loading 组件

我们可以先创建一个 Loading 组件，该组件实现了一个全屏的 loading 效果，可以通过控制它的显示和隐藏来实现 loading 效果。

<template>
  <div v-show="loadingFlag" class="loading">
    <div class="loading-inner">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingFlag: false
    };
  }
};
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9999;
}
.loading-inner {
  font-size: 24px;
}
</style>

二、全局注册 Loading 组件

我们可以在 main.js 文件中，将该组件全局注册，这样各个组件都可以访问到该组件。

import Vue from 'vue'
import App from './App.vue'
import Loading from './components/Loading.vue'

Vue.component('Loading', Loading)

new Vue({
  render: h => h(App)
}).$mount('#app')

三、全局监听路由变化

我们可以使用路由的 beforeEach 方法，在路由变化时，判断是否需要显示 loading，并在路由变化完成后，进行 loading 的隐藏。

router.beforeEach((to, from, next) => {
  // 显示 loading
  Vue.prototype.$showLoading()

  next()
})

router.afterEach(() => {
  // 隐藏 loading
  Vue.prototype.$hideLoading()
})

四、在 Vue 的 prototype 上挂载方法

我们将在 Vue 的 prototype 上挂载 $showLoading 和 $hideLoading 方法，在各个组件内部，通过 this.$showLoading() 和 this.$hideLoading() 方法来控制 loading 的显示和隐藏。

Vue.prototype.$showLoading = function() {
  this.$refs.loading.loadingFlag = true
}

Vue.prototype.$hideLoading = function() {
  this.$refs.loading.loadingFlag = false
}

示例说明

下面给出两个示例，以说明如何在 Vue 中使用全局封装 loading 加载。

示例一：在 axios 发出请求时显示 loading

当 axios 发送请求时，我们可以使用拦截器 interceptors 来控制 loading 的显示和隐藏。

import axios from 'axios'

axios.interceptors.request.use(function(config) {
  // 显示 loading
  Vue.prototype.$showLoading()

  return config
}, function(error) {
  // 隐藏 loading
  Vue.prototype.$hideLoading()

  return Promise.reject(error)
})

axios.interceptors.response.use(function(response) {
  // 隐藏 loading
  Vue.prototype.$hideLoading()

  return response
}, function(error) {
  // 隐藏 loading
  Vue.prototype.$hideLoading()

  return Promise.reject(error)
})

示例二：在异步操作时显示 loading

在异步操作中，我们可以使用 Promise 的 then 和 catch 方法，来控制 loading 的显示和隐藏。

export default {
  methods: {
    async doSomething() {
      try {
        // 显示 loading
        this.$showLoading()

        // 异步操作
        await doSomeAsync()

        // 隐藏 loading
        this.$hideLoading()
      } catch (e) {
        // 隐藏 loading
        this.$hideLoading()
      }
    }
  }
}