Vueインジケーターの使い方

Vue インジケーターは、ページの読み込みまたは処理の進行状況を表示するために使用されるコンポーネントです。これは、ユーザーが何を待っているのか、どのくらい待つ必要があるのか​​をユーザーに知らせるフィードバックを提供するため、非常に便利です。この記事ではVueインジケーターの使い方を紹介します。

1. Vue インジケーターのインストール

Vue インジケーターの使用を開始する前に、Vue インジケーターをインストールする必要があります。プロジェクトの要件とニーズに応じて、いくつかのオプションが利用可能です。 1 つのオプションは、npm パッケージ マネージャーを介してインストールすることです。

ターミナルで次のコマンドを実行して vue-spinner をインストールします:

npm install vue-spinner --save

プロジェクトで Yarn をパッケージ マネージャーとして使用する場合は、次のコマンドを使用してインストールすることもできます:

yarn add vue-spinner

2. Vue インジケーターの紹介

vue-spinner をインストールしたら、それを Vue コンポーネントに導入する必要があります。これは、特定のコンポーネント、ページ レベル、またはアプリのエントリ ファイルに導入できます。

通常は、次のように script タグに導入できます:

<template>
  <div>
    <BounceLoader />
  </div>
</template>

<script>
import { BounceLoader } from 'vue-spinner'

export default {
  components: {
    BounceLoader
  }
}
</script>

この例では、テンプレートで非常に単純なコンテナ div を使用し、 BounceLoader を追加しました。 script タグでは、まず、vue-spinner の BounceLoader コンポーネントを参照していることを明確に示します。次に、それをコンポーネントとして現在のコンポーネントに追加します。

3. ページでの使用

Vue コンポーネントに vue-spinner を導入した後、テンプレートで直接使用できるようになります。ここでは、BounceLoader コンポーネントが使用される例を示します。これは、他のコンテンツが読み込まれているときに表示される非常に優れたアニメーション読み込みインジケーターです。

<template>
  <div>
    <BounceLoader />
    <p>内容正在加载，请稍候...</p>
  </div>
</template>

このコードでは、BounceLoader コンポーネントを単純な div でラップし、その下に説明テキストを追加して、何をロードしているのかをユーザーに伝えます。

これは簡単です。必要に応じて、BounceLoader だけでなく、より複雑なインジケーターを使用できます。

4. インジケーターのカスタマイズ性

Vue インジケーターは高度にカスタマイズ可能です。さまざまなパラメーターを設定することで、インジケーターのサイズ、色、速度などをカスタマイズできます。一般的に使用されるパラメータの一部を次に示します。

#sizeNumber35インジケーターのサイズ (ピクセル単位)#colormargin半径loadingTextloadingTextStyleインジケーターをよりクールに見せたい場合は、コンポーネントにカスタム スタイルを追加できます。この例では、BounceLoader インジケーターに次のスタイルを追加しました。

#Name	Type	Default value	Description
String	'#1A8FFF'	インジケーターの色
String	'auto'	インジケーターマージン値
Number	0	インジケーターのコーナー半径
String	'Loading...'	インジケーターにテキストを表示するかどうかプロンプト
オブジェクト	{}	カスタマイズ可能なテキスト スタイル

<template>
  <div class="loading-container">
    <BounceLoader 
      :size="50" 
      :color="'#FFA500'" 
      :margin="'20px'" 
      :radius="10" 
      :loadingText="false" 
      :loadingTextStyle="textStyle" 
    />
  </div>
</template>

<script>
import { BounceLoader } from 'vue-spinner'

export default {
  components: {
    BounceLoader
  },
  data: function() {
    return {
      textStyle: {
        fontSize: '20px',
        color: '#FFA500'
      }
    }
  }
}
</script>

<style>
.loading-container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

この例では、まず BounceLoader コンポーネントを囲む div コンテナを定義し、そのスタイルを定義します。高さを 100vh に設定し、フレックスボックス レイアウトを使用して BounceLoader コンポーネントを中央に配置しました。サイズ、色、余白など、使用されるいくつかのカスタム プロパティも設定します。

要約すると、Vue インジケーターは、何が起こっているかをユーザーに知らせる非常に便利なツールです。 Vue インジケーターにはさまざまなスタイルとサイズがあり、さまざまな種類のプロジェクトでの使用に適しています。カスタム プロパティを使用してインジケーターをカスタマイズし、デザイン スタイルに一致する外観を実現できます。

以上がVueインジケーターの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。