Vue と Element-UI を使用してプログレスバーと読み込みアニメーション効果を実装する方法-Vue.js-php.cn

Vue と Element-UI を使用してプログレスバーと読み込みアニメーション効果を実装する方法

WBOY

リリース： 2023-07-21 20:54:34

オリジナル

5235 人が閲覧しました

Vue と Element-UI を使用してプログレスバーとアニメーション効果の読み込みを実装する方法

Vue.js は軽量のフロントエンドフレームワークであり、Element-UI は Vue.js に基づく UI コンポーネントライブラリです。、豊富なコンポーネントとインタラクティブなエフェクトを提供しており、美しいフロントエンドインターフェイスを迅速に開発するのに役立ちます。この記事では、Vue と Element-UI を使用してプログレスバーと読み込みアニメーション効果を実装する方法を紹介します。

1. Element-UI のインストールと導入

まず、Element-UI ライブラリをインストールする必要があります。 npm または Yarn 経由でインストールします:

npm install element-ui

ログイン後にコピー

次に、Element-UI のスタイルとコンポーネントをプロジェクトエントリファイル (通常は main.js) に導入します:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

ログイン後にコピー

2. プログレスバーコンポーネントを使用します

Element-UI は、進行状況バーを表示するための <el-progress> コンポーネントを提供します。 percentage 属性を設定することで、進行状況バーの進行状況を制御できます。

<template>
  <el-progress :percentage="progress"></el-progress>
</template>

<script>
export default {
  data() {
    return {
      progress: 50
    };
  }
};
</script>

ログイン後にコピー

上の例では、progress# を通じて進行状況バーの進行状況を 50 に制御します。＃＃属性％。実際のニーズに応じて、Vue インスタンスのデータに異なる progress 値を設定して、動的なプログレスバー効果を実現できます。

3. ローディングアニメーション効果を使用する

Element-UI は、スケルトン画面、ローディング、折れ線グラフ、レーダーチャートなどを含む、さまざまなローディングアニメーション効果を提供します。

、、、および およびこれらのエフェクトを使用する他のコンポーネント。

以下では例としてスケルトン画面と読み込みを取り上げます:

3.1 スケルトン画面の使用

スケルトン画面は一般的な読み込み効果であり、通常はページに使用されます。またはコンポーネントのロードと同時に、所定のスケルトン構造が表示され、ユーザーの待ち時間体験が向上します。

Element UI は、スケルトン画面効果を実現する

コンポーネントを提供します。以下は簡単な例です:

<template>
  <el-skeleton :loading="loading"></el-skeleton>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  }
};
</script>

ログイン後にコピー

上の例では、

loading 属性を通じてスケルトン画面の表示と非表示を制御します。 loadingの値を変更することで、スケルトン画面の読み込み状態を制御できます。

3.2 ロードの使用

ロードは、もう 1 つの一般的なロード効果であり、通常、非同期リクエストまたは操作中にプロンプトを待機するために使用されます。

Element UI は、読み込み効果を実現する

コンポーネントを提供します。簡単な例を次に示します。

<template>
  <el-button @click="startLoading">点击开始加载</el-button>
</template>

<script>
export default {
  methods: {
    startLoading() {
      const loadingInstance = this.$loading({ text: '加载中...' });

      setTimeout(() => {
        loadingInstance.close();
      }, 2000);
    }
  }
};
</script>

ログイン後にコピー

上記の例では、

this.$loading メソッドを呼び出して読み込み効果を開始し、loadingInstance.close()# を渡します。 # ローディング効果を終了するメソッド。特定のビジネスニーズに応じて、読み込み表示時間を調整できます。結論