VUE3 基本チュートリアル: Vue.js プラグインを使用してプログレス バー コンポーネントをカプセル化する

Web 開発では、プログレス バー コンポーネントは、タスクやページの読み込みの進行状況を表示するために使用される一般的な UI コンポーネントです。 Vue.js では、その強力なコンポーネント化機能に基づいて、カスタム プログレス バー コンポーネントを簡単にカプセル化して、さまざまな Vue.js アプリケーションで再利用できるプラグインとしてカプセル化できます。この記事では、完全な Vue.js プログレス バー コンポーネントの例を通じて、Vue.js プラグインを使用してプログレス バー コンポーネントをカプセル化する方法を説明します。

VUE3 基本チュートリアル: Vue.js プラグインを使用してプログレス バー コンポーネントをカプセル化する

1. Vue.js プログレス バー コンポーネントの最初の概要

Vue .js プログレスバーコンポーネントは単なるものではありません。単純な UI コンポーネントは、バックグラウンド管理システムに不可欠で重要なコンポーネントです。今日は、Vue.js プログレス バー コンポーネントのデモを使用して、Vue.js プラグインを使用してプログレス バー コンポーネントをカプセル化する方法を学びます。

まず、進行状況バー コンポーネントを定義する必要があります。これには、上部の進行状況バー、下部の進行状況バー、右のステータス アイコンの 3 つの主要コンポーネントが含まれます。このコンポーネントの HTML および CSS コード スニペットは次のとおりです。

<div class="progress">
  <div class="progress-top"></div>
  <div class="progress-bottom"></div>
  <i class="icon"></i>
</div>

.progress {
  position: relative;
  height: 14px;
  margin: 5px 0;
  border-radius: 6px;
  background-color: #f2f2f2;
}

.progress-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #5e72e4;
  transition: width .2s ease-in-out;
  z-index: 2;
}

.progress-bottom {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #fff;
  transition: width .2s ease-in-out;
  z-index: 1;
}

.icon {
  position: absolute;
  top: -5px;
  right: -10px;
  font-size: 18px;
  color: #5e72e4;
}

このコンポーネントの対応する機能は、進行状況バーを表示することであり、2 つのパラメーターを提供します。値は、進行状況バーの幅を調整するために使用されます (0 ~ 100)、color プログレスバーの色を調整するために使用されます。

2. Vue.js を使用してプログレス バー コンポーネントの基本ロジックを実装します

次に、Vue.js を使用してプログレス バー コンポーネントの動的データをバインドし、基本ロジックを実装しますコンポーネントの 。

まず、Vue コンポーネントのデータ属性で 2 つの変数、progressValue と progressColor を定義します。前者は進行状況バーの幅をバインドするために使用され、後者は進行状況バーの色をバインドするために使用されます。

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  }
  
  // ...组件的其他属性和方法
}

次に、コンポーネントの template 属性で、data 属性で定義された変数に基づいてプログレス バー コンポーネントの HTML コードを動的にレンダリングします。主に、progressValue の値をバインドすることにより、データが更新されるとプログレス バーの幅が動的に変化します。

<template>
  <div class="progress">
    <div class="progress-top" :style="{ width: progressValue + '%' }"></div>
    <div class="progress-bottom"></div>
    <i class="icon" :class="['fa', 'fa-circle-o-notch', 'spin', 'text-'+progressColor]"></i>
  </div>
</template>

最後に、コンポーネントのメソッド属性で、初期値を取得する更新メソッドを定義します。 Ajax 非同期リクエストを通じて現在のプログレス バーのデータを取得し、updateProgress メソッドを呼び出してコンポーネント データを更新します。

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  },
  methods: {
    update() {
      // 模拟Ajax异步请求
      // 返回progressValue范围在0~100之间的随机数
      const progressValue = Math.floor(Math.random() * 100);
      if(progressValue > 0 && progressValue < 100) {
        this.updateProgress(progressValue, this.progressColor);
      }
    },
    updateProgress(value, color) {
      this.progressValue = value;
      this.progressColor = color;
    }
  }
}

これで、Vue.js プログレス バー コンポーネントはすでに update メソッドを渡し、基本的なデータ バインディングを実装できるようになりました。そして動的に更新されます。

3. Vue.js プラグインを使用してプログレス バー コンポーネントをカプセル化する

前の簡単な実装の後、使用可能な Vue.js プログレス バー コンポーネント コードを取得しました。次に、このコードを Vue.js プラグインにカプセル化します。

まず、Vue.js プロジェクトで新しい VProgress プラグインを作成し、プラグインの Index.js ファイルでグローバル インストール メソッドを定義して、Vue.js プログレス バーを登録する必要があります。コンポーネント。:

import VProgress from './vprogress.vue';

const install = function(Vue) {
  Vue.component(VProgress.name, VProgress);
}

export default install;

これに基づいて、追加のグローバル構成項目とプラグインのグローバル登録メソッドを提供することもできます。たとえば、プラグインのグローバル構成項目を定義します:

import VProgress from './vprogress.vue';

const defaults = {
  color: '#5e72e4',
  delay: 1000
};

const install = function(Vue, options = {}) {
  const { color, delay } = Object.assign({}, options, defaults);

  Vue.prototype.$vprogress = {
    update(value) {
      VProgress.methods.updateProgress.call({ progressColor: color }, value, color);
    },
    delay
  };

  Vue.component(VProgress.name, VProgress);
}

export default install;

プラグインのグローバル構成項目を追加します。デフォルトの色は進行状況バーの色で、遅延は間隔です。 2 つの更新の間。プログレス バーを更新するたびに、Vue.prototype.$vprogress.update メソッドなどのグローバル メソッドを通じてプログレス バーの値と色の値を更新でき、Vue.prototype を通じて更新間隔を制御できます。 $vprogress.lay 時間。

最後に、上記のコードをパッケージ化し、さまざまな Vue.js プロジェクトで使用できる VProgress プラグイン インスタンスを生成します。

4. Vue.js プログレス バー コンポーネントの使用

ここで、新しい Vue.js プロジェクトで VProgress プラグインを使用します。使用方法は非常に簡単で、Vue アプリケーションのエントリ ファイル main.js の Vue.use() メソッドを通じて登録するだけです:

import Vue from 'vue';
import VProgress from 'vprogress';

Vue.use(VProgress, {
  color: '#e74c3c',
  delay: 500
});

ここでは、Vue.use を渡すこともできます。 () メソッド。オプション オブジェクトを入力して、デフォルトの VProgress プラグイン構成項目をオーバーライドします。

次に、テンプレート内で、VProgress コンポーネントを直接使用し、$vporgress.update メソッドを呼び出して進行状況バーの値と色の値を更新するだけです。

<template>
  <div class="app">
    <v-progress></v-progress>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const { update, delay } = this.$vprogress;
    setInterval(() => {
      const value = Math.round(Math.random() * 100);
      update(value);
    }, delay)
  }
}
</script>

setInterval メソッドを使用します プログレス バーの値を自動的に更新します。間隔は $vprogress.lay によって固定されます。プログレス バーがデータを更新するたびに、プログレス バーの値と色のパラメータはグローバル設定に従って自動的に更新されますプラグインの項目とプロジェクトのローカル設定に応じて、進行状況バーの色と遅延時間が更新されます。

5. 概要

上記のデモを通じて、Vue.js プラグインを使用してプログレス バー コンポーネントをカプセル化し、それを Vue.js アプリケーションで再利用する方法を学びました。この記事のコード例は、Vue.js を初めて使用する読者が Vue.js プラグインの基本的な実装方法とプログレス バー コンポーネントの基本的な実装ロジックをすぐに理解できるようにすることを目的としており、その後のカスタム プラグイン開発の基礎を築きます。コンポーネントとプラグイン。

以上がVUE3 基本チュートリアル: Vue.js プラグインを使用してプログレス バー コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。