Comment implémenter l'effet de chargement global dans Vue

Comment implémenter des effets de chargement globaux dans Vue

Dans le développement de Vue, l'implémentation d'effets de chargement globaux est une exigence courante. L'effet de chargement global peut donner aux utilisateurs une bonne invite pour leur faire savoir que la page est en cours de chargement, améliorant ainsi l'expérience utilisateur. Cet article expliquera comment implémenter les effets de chargement globaux dans Vue et fournira des exemples de code spécifiques.

1. Créer un composant Loading global

Tout d'abord, nous devons créer un composant Loading global. Ce composant peut être une simple animation de chargement, telle qu'une icône de chargement rotative. Vous pouvez utiliser des bibliothèques d'interface utilisateur tierces, telles que Element UI ou le composant Loading fourni par Ant Design Vue. Voici un exemple :

<template>
  <div class="global-loading">
    <el-loading :visible="visible" text="加载中..."></el-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Dans ce composant, nous utilisons le composant el-loading fourni par Element UI et contrôlons l'affichage et le masquage du chargement via l'attribut visible. el-loading组件，并通过visible属性控制Loading的显示和隐藏。

2. 在App.vue中使用全局Loading组件

接下来，我们需要在App.vue中使用全局Loading组件，并在需要的时候显示和隐藏它。可以使用Vue的事件总线机制来实现组件之间的通信。具体实现如下：

<template>
  <div id="app">
    <router-view></router-view>
    <GlobalLoading ref="globalLoading"></GlobalLoading>
  </div>
</template>

<script>
import GlobalLoading from './components/GlobalLoading.vue'

export default {
  components: {
    GlobalLoading
  },
  mounted() {
    this.$bus.$on('show-loading', () => {
      this.$refs.globalLoading.show()
    })
    this.$bus.$on('hide-loading', () => {
      this.$refs.globalLoading.hide()
    })
  },
  beforeDestroy() {
    this.$bus.$off('show-loading')
    this.$bus.$off('hide-loading')
  }
}
</script>

在这个示例中，我们引入了全局Loading组件，并使用ref属性给它起了一个名字。在mounted钩子函数中，我们使用事件总线的$on方法监听show-loading和hide-loading事件，并在对应的回调函数中调用全局Loading组件的show和hide方法来显示和隐藏Loading。

3. 在其他组件中触发全局Loading效果

要在其他组件中触发全局Loading效果，我们可以使用事件总线的$emit方法来触发show-loading和hide-loading事件。下面是一个示例：

<template>
  <div>
    <h1 id="这是其他组件">这是其他组件</h1>
    <button @click="startLoading">开始加载</button>
    <button @click="stopLoading">停止加载</button>
  </div>
</template>

<script>
export default {
  methods: {
    startLoading() {
      this.$bus.$emit('show-loading')
    },
    stopLoading() {
      this.$bus.$emit('hide-loading')
    }
  }
}
</script>

在这个示例中，我们分别在两个按钮的点击事件中调用$emit方法触发show-loading和hide-loading

Utilisez le composant Loading global dans App.vue
🎜Ensuite, nous devons utiliser le composant Loading global dans App.vue et l'afficher si nécessaire et le masquer il. La communication entre les composants peut être réalisée à l'aide du mécanisme de bus d'événements de Vue. L'implémentation spécifique est la suivante : 🎜rrreee🎜Dans cet exemple, nous introduisons le composant global Loading et lui donnons un nom en utilisant l'attribut ref. Dans la fonction hook Mounted, nous utilisons la méthode $on du bus d'événements pour surveiller show-loading et hide-loading et appelez les méthodes <code>show et hide du composant global Loading dans la fonction de rappel correspondante pour afficher et masquer le Loading. 🎜
🎜Déclencher l'effet de chargement global dans d'autres composants🎜🎜🎜Pour déclencher l'effet de chargement global dans d'autres composants, nous pouvons utiliser la méthode $emit du bus d'événements pour déclencher les événements show-loading et hide-loading. Voici un exemple : 🎜rrreee🎜Dans cet exemple, nous appelons la méthode $emit pour déclencher show-loading et hide dans les événements click des deux boutons respectivement l'événement -loading, déclenchant ainsi l'affichage et le masquage de l'effet Loading global. 🎜🎜Grâce aux étapes ci-dessus, nous pouvons obtenir l'effet de chargement global dans Vue. Lorsque l'effet de chargement global est nécessaire, il suffit de déclencher l'événement dans le composant correspondant, et le composant de chargement global sera affiché, donnant à l'utilisateur une bonne invite. Pour des effets spécifiques, veuillez vous référer à l'exemple de code en cours d'exécution. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!