Vueでグローバルローディングエフェクトを実装する方法-Vue.js-php.cn

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

WBOY

リリース： 2023-06-11 09:05:20

オリジナル

5872 人が閲覧しました

フロントエンド開発では、Web ページとの対話中にデータがロードされるのをユーザーが待つ必要があるというシナリオがよくあります。このとき、通常、ユーザーに待つよう促すためにロード効果が表示されます。。 Vue フレームワークでは、グローバルローディングエフェクトの実装は難しくありませんので、その実装方法を紹介します。

ステップ 1: Vue プラグインの作成

すべての Vue インスタンスで参照できる loading という名前の Vue プラグインを作成できます。プラグインでは、次の 2 つのメソッドを実装する必要があります:

show(): 読み込み効果を表示するために使用されます
hide (): ローディング効果を非表示にするために使用されます。

次は、loading プラグインのコードです:

const Loading = {
  show() {
    // 显示loading效果的代码
  },
  hide() {
    // 隐藏loading效果的代码
  }
}

export default {
  install(Vue) {
    Vue.prototype.$loading = Loading
  }
}

ログイン後にコピー

上記のコード内では、 The object of Loading という名前のファイルを定義します。このファイルには、読み込み効果を表示および非表示にするメソッドが含まれています。 install() メソッドは、loading オブジェクトを Vue インスタンスにインストールするために使用され、オブジェクトがすべての Vue インスタンスで参照できるようにします。

ステップ 2: 読み込みコンポーネントを実装する

読み込み効果を実現するには、画面全体をカバーする読み込みレイヤーを Vue コンポーネントに追加する必要があります。これは CSS を通じて実現できます。具体的には、Vue コンポーネント内のローディングレイヤーの DOM 要素を動的に追加および削除して、ローディング効果を表示または非表示にすることができます。以下は、単純な読み込みコンポーネントです。

<template>
  <div v-if="visible" class="loading-mask">
    <div class="loading-spinner"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

<style>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

ログイン後にコピー

上記のコードでは、ページ全体をカバーし、半透明の黒い背景を設定する loading-mask という名前の div レイヤーを定義します。 loading-mask では、loading-spinner という名前の別の div レイヤーを追加しました。これは、回転読み込みアイコンを表示するために使用されます。最後に、Vue コンポーネントの data で visible 変数を定義し、読み込みレイヤーを表示する必要があるかどうかを決定しました。

ステップ 3: コンポーネントで読み込みを使用する

基本的な読み込みコンポーネントと Vue プラグインを実装したので、それらを Vue コンポーネントで使用する必要があります。

まず、作成したばかりの Vue プラグインを Vue コンポーネントに導入し、読み込みコンポーネントを現在のコンポーネントに追加します。

<template>
  <div>
    <h1>这是一个Vue组件</h1>
    <loading ref="loading"></loading>
  </div>
</template>

<script>
import LoadingPlugin from '@/plugins/loading'
import Loading from '@/components/Loading'

export default {
  name: 'HelloWorld',
  components: {
    Loading
  },
  mounted() {
    this.$loading = this.$refs.loading
  },
  plugins: [
    LoadingPlugin
  ],
  methods: {
    fetchData() {
      this.$loading.show() // 显示loading效果
      // 发送请求
      // ...
      this.$loading.hide() // 隐藏loading效果
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、まず Vue プラグインを導入します。 LoadingPlugin の前に作成され、components 属性を使用して読み込みコンポーネントを現在のコンポーネントに追加します。 mounted() メソッドでは、読み込みコンポーネントのインスタンスを $loading プロパティに割り当てます。これにより、現在のコンポーネントの show メソッドと Hide メソッドを呼び出して、表示および非表示を行うことができます。ローディングエフェクトを非表示にします。

最後に、fetchData() メソッドで、this.$loading.show() を呼び出して読み込み効果を表示できます。データが読み込まれた後、this を呼び出します。 $loading.hide() メソッドを使用して非表示にします。このようにして、グローバルローディング効果を達成することに成功しました。

概要

この記事では、Vue フレームワークでグローバル読み込みエフェクトを実装する方法を紹介しました。 loading プラグインを作成し、Vue インスタンスにインストールして、すべての Vue コンポーネントで呼び出せるようにしました。また、DOM 要素を動的に追加および削除して、読み込み効果を表示または非表示にする読み込みコンポーネントも実装しました。最後に、Vue コンポーネントの $loading オブジェクトの show メソッドと Hide メソッドを呼び出して、読み込み効果を表示または非表示にします。この実装により、優れたユーザーエクスペリエンスを実現し、ユーザーの待ち時間を短縮し、アプリケーションのパフォーマンスを向上させることができます。

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