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

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

WBOY

リリース： 2023-06-15 22:33:23

オリジナル

3146 人が閲覧しました

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 サイトの他の関連記事を参照してください。