Rumah >hujung hadapan web >View.js >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.
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的显示和隐藏。
接下来,我们需要在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。
要在其他组件中触发全局Loading效果,我们可以使用事件总线的$emit
方法来触发show-loading
和hide-loading
事件。下面是一个示例:
<template> <div> <h1>这是其他组件</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
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. 🎜$emit
bas acara untuk mencetuspemuatan tunjuk$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!