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

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

PHPz

リリース： 2023-11-07 09:18:28

オリジナル

1185 人が閲覧しました

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

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 コンポーネントを使用し、表示する必要があります。必要に応じて非表示にします。コンポーネント間の通信は、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 エフェクトをトリガーする

show-loading

および hide-loading イベントをトリガーするメソッド。以下に例を示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> この例では、<code>$emit メソッドを呼び出して、2 つのクリックイベントで show-loading

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

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