Bagaimana untuk melaksanakan kesan Pemuatan global dalam Vue

Cara melaksanakan kesan Pemuatan global dalam Vue

Dalam pembangunan Vue, melaksanakan kesan Pemuatan global adalah keperluan biasa. Kesan Pemuatan global boleh memberi pengguna gesaan yang baik untuk memberitahu mereka bahawa halaman sedang dimuatkan, meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara melaksanakan kesan Pemuatan global dalam Vue dan memberikan contoh kod khusus.

1. Buat komponen Pemuatan global

Pertama, kita perlu mencipta komponen Pemuatan global. Komponen ini boleh menjadi animasi pemuatan yang mudah, seperti ikon Pemuatan berputar. Anda boleh menggunakan perpustakaan UI pihak ketiga, seperti UI Elemen atau komponen Memuatkan yang disediakan oleh Ant Design Vue. Berikut ialah contoh:

<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>

Dalam komponen ini, kami menggunakan komponen el-loading yang disediakan oleh UI Element dan mengawal paparan dan penyembunyian Memuat melalui atribut 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

Gunakan komponen Pemuatan global dalam App.vue
🎜Seterusnya, kita perlu menggunakan komponen Pemuatan global dalam App.vue dan paparkannya apabila diperlukan dan sembunyikan ia. Komunikasi antara komponen boleh dicapai menggunakan mekanisme bas acara Vue. Pelaksanaan khusus adalah seperti berikut: 🎜rrreee🎜Dalam contoh ini, kami memperkenalkan komponen Pemuatan global dan memberikannya nama menggunakan atribut ref. Dalam fungsi cangkuk mounted, kami menggunakan kaedah $on bas acara untuk memantau show-loading dan hide-loading, dan panggil kaedah <code>show dan hide komponen Pemuatan global dalam fungsi panggil balik yang sepadan untuk menunjukkan dan menyembunyikan Pemuatan. 🎜
🎜Cetuskan kesan Pemuatan global dalam komponen lain🎜🎜🎜Untuk mencetuskan kesan Pemuatan global dalam komponen lain, kita boleh menggunakan kaedah $emit bas acara untuk mencetuspemuatan tunjuk
dan pemuatan sembunyi. Berikut ialah contoh: 🎜rrreee🎜Dalam contoh ini, kami memanggil kaedah $emit untuk mencetuskan show-loading dan menyembunyikan dalam peristiwa klik pada dua butang masing-masing. -loading, dengan itu mencetuskan paparan dan menyembunyikan kesan Loading global. 🎜🎜Melalui langkah di atas, kita boleh mencapai kesan Pemuatan global dalam Vue. Apabila kesan Pemuatan global diperlukan, kami hanya perlu mencetuskan peristiwa dalam komponen yang sepadan dan komponen Pemuatan global akan dipaparkan, memberikan pengguna gesaan yang baik. Untuk kesan khusus, sila rujuk kod sampel yang sedang berjalan. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan Pemuatan global dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!