Vue でグローバルな読み込みエフェクトを実装する方法

Vue でグローバル Loading エフェクトを実装する方法

Vue 開発では、グローバル Loading エフェクトを実装することが一般的な要件です。グローバルな読み込み効果により、ページが読み込まれていることをユーザーに知らせる適切なプロンプトが表示され、ユーザー エクスペリエンスが向上します。この記事では、Vue でグローバルな読み込み効果を実装する方法を紹介し、具体的なコード例を示します。

1. グローバル 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 エフェクトをトリガーする

3. 他のコンポーネントでグローバル Loading エフェクトをトリガーするには、イベント バス

show-loading

および hide-loading イベントをトリガーするメソッド。以下に例を示します。 <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;h1 id=&quot;这是其他组件&quot;&gt;这是其他组件&lt;/h1&gt; &lt;button @click=&quot;startLoading&quot;&gt;开始加载&lt;/button&gt; &lt;button @click=&quot;stopLoading&quot;&gt;停止加载&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { methods: { startLoading() { this.$bus.$emit('show-loading') }, stopLoading() { this.$bus.$emit('hide-loading') } } } &lt;/script&gt;</pre> この例では、$emit メソッドを呼び出して、2 つのクリック イベントで

show-loading

と ## をトリガーします。 #hide-loading イベントにより、グローバル Loading エフェクトの表示と非表示がトリガーされます。 上記の手順により、Vue でグローバルな読み込み効果を実現できます。グローバルな Loading エフェクトが必要な場合、対応するコンポーネントでイベントをトリガーするだけで済みます。グローバルな Loading コンポーネントが表示され、ユーザーに適切なプロンプトが表示されます。具体的な効果については、実際に動作するサンプルコードを参照してください。

以上がVue でグローバルな読み込みエフェクトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。