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

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()# を渡します。 # ローディング効果を終了するメソッド。特定のビジネス ニーズに応じて、読み込み表示時間を調整できます。 結論

この記事の導入部を通じて、Vue と Element-UI を使用してプログレス バーと読み込みアニメーション効果を実装する方法を学びました。プログレスバーを使用して操作の進行状況を表示したり、アニメーションを読み込むことでユーザーの待ち時間を増やすことができます。独自のニーズに応じて、Element-UI が提供する他のコンポーネントやエフェクトを組み合わせて、フロントエンド インターフェイスをさらに充実させることができます。

この記事では、いくつかの基本的な使用方法のみを紹介しますが、Element-UI には他にも多くのコンポーネントや機能があります。 Element-UI に興味がある場合は、公式ドキュメントで詳細を確認し、フロントエンド開発スキルをすぐに向上させることができます。

以上がVue と Element-UI を使用してプログレス バーと読み込みアニメーション効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。