Vue SPA 应用中全局 Loading 组件的实现

在 Vue SPA 应用中，我们常常需要在页面加载数据或进行异步操作时显示一个全局的 Loading 组件，以提升用户体验。本文将介绍如何在 Vue 应用中实现一个全局 Loading 组件。

实现思路

实现一个全局 Loading 组件的基本思路是：

1. 在应用的根组件中定义一个 Loading 组件，并使用 v-if 控制其显示和隐藏。
2. 在应用的任意组件中，通过一个全局的事件总线来触发显示和隐藏 Loading 组件的事件。

代码实现

定义全局事件总线

我们需要定义一个全局的事件总线，用于在应用的任意组件中触发显示和隐藏 Loading 组件的事件。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

定义 Loading 组件

我们定义一个 Loading 组件，并在根组件中使用 v-if 控制其显示和隐藏。

<!-- Loading.vue -->
<template>
  <div class="loading" v-if="loading">
    <div class="spinner"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  mounted() {
    // 监听全局事件
    this.$bus.$on('show-loading', () => {
      this.loading = true
    })
    this.$bus.$on('hide-loading', () => {
      this.loading = false
    })
  }
}
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

使用全局事件总线触发 Loading 组件的显示和隐藏

在任意组件中，我们可以使用全局事件总线来触发显示和隐藏 Loading 组件的事件。

<!-- AnyComponent.vue -->
<template>
  <div>
    <button @click="fetchData">加载数据</button>
  </div>
</template>

<script>
import { EventBus } from '@/event-bus.js'

export default {
  methods: {
    fetchData() {
      EventBus.$emit('show-loading')
      // 异步加载数据
      setTimeout(() => {
        EventBus.$emit('hide-loading')
      }, 2000)
    }
  }
}
</script>

总结

通过定义一个全局的事件总线，我们可以在 Vue SPA 应用中实现一个全局的 Loading 组件，以提升用户体验。这种实现方式比较简单，但需要注意的是，每次触发事件时都会重新渲染根组件，可能会影响性能。如果需要更高效的实现方式，可以考虑使用 Vuex 或第三方库来管理全局状态。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c34dd8add4f0e0ffd8a9c5