ホームページ > 記事 > ウェブフロントエンド > Vue でグローバルな読み込みエフェクトを実装する方法
Vue でグローバルな読み込みエフェクトを実装する方法
- PHPzオリジナル
- 2023-11-07 09:18:281067ブラウズ
Vue でグローバル Loading エフェクトを実装する方法
Vue 開発では、グローバル Loading エフェクトを実装することが一般的な要件です。グローバルな読み込み効果により、ページが読み込まれていることをユーザーに知らせる適切なプロンプトが表示され、ユーザー エクスペリエンスが向上します。この記事では、Vue でグローバルな読み込み効果を実装する方法を紹介し、具体的なコード例を示します。
- グローバル Loading コンポーネントの作成
まず、グローバル Loading コンポーネントを作成する必要があります。このコンポーネントは、回転する読み込みアイコンなどの単純な読み込みアニメーションにすることができます。 Element UI や Ant Design Vue が提供する Loading コンポーネントなどのサードパーティ UI ライブラリを使用できます。以下は例です。
<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> このコンポーネントでは、Element UI が提供する el-loading コンポーネントを使用し、visible# を通じて Loading の表示と読み込みを制御します。 ## 属性を非表示にします。
- 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 を表示および非表示にします。
- 他のコンポーネントでグローバル Loading エフェクトをトリガーするには、イベント バス
および hide-loading イベントをトリガーするメソッド。以下に例を示します。 <pre class='brush:php;toolbar:false;'><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></pre> この例では、$emit メソッドを呼び出して、2 つのクリック イベントで
と ## をトリガーします。 #hide-loading イベントにより、グローバル Loading エフェクトの表示と非表示がトリガーされます。 上記の手順により、Vue でグローバルな読み込み効果を実現できます。グローバルな Loading エフェクトが必要な場合、対応するコンポーネントでイベントをトリガーするだけで済みます。グローバルな Loading コンポーネントが表示され、ユーザーに適切なプロンプトが表示されます。具体的な効果については、実際に動作するサンプルコードを参照してください。
以上がVue でグローバルな読み込みエフェクトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。