Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen bar kemajuan

Dalam pembangunan web, komponen bar kemajuan ialah komponen UI biasa yang digunakan untuk memaparkan kemajuan tugas atau pemuatan halaman. Dalam Vue.js, berdasarkan ciri komponenisasi yang berkuasa, kami boleh merangkum komponen bar kemajuan tersuai dengan mudah dan merangkumnya sebagai pemalam untuk digunakan semula dalam pelbagai aplikasi Vue.js. Artikel ini akan menunjukkan cara menggunakan pemalam Vue.js untuk merangkum komponen bar kemajuan melalui contoh komponen bar kemajuan Vue.js yang lengkap.

Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen bar kemajuan

1 Pengenalan pertama kepada komponen bar kemajuan Vue.js

bar kemajuan Vue.js. komponen bukan sahaja Komponen UI yang mudah adalah komponen yang amat diperlukan dan penting dalam sistem pengurusan latar belakang. Hari ini kita akan menggunakan demonstrasi komponen bar kemajuan Vue.js untuk mengetahui cara menggunakan pemalam Vue.js untuk merangkum komponen bar kemajuan.

Pertama, kita perlu menentukan komponen bar kemajuan, yang merangkumi 3 komponen utama: bar kemajuan atas, bar kemajuan bawah dan ikon status kanan. Berikut ialah coretan kod HTML dan CSS bagi komponen ini:

<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;
}

Fungsi sepadan komponen ini adalah untuk memaparkan bar kemajuan dan menyediakan dua parameter: nilai digunakan untuk melaraskan lebar bar kemajuan (0 ~ 100), warna Digunakan untuk melaraskan warna bar kemajuan.

2. Gunakan Vue.js untuk melaksanakan logik asas komponen bar kemajuan

Seterusnya, kami menggunakan Vue.js untuk mengikat data dinamik komponen bar kemajuan dan melaksanakan logik asas daripada komponen tersebut.

Pertama, kami mentakrifkan dua pembolehubah dalam atribut data komponen Vue: progressValue dan progressColor. Yang pertama digunakan untuk mengikat lebar bar kemajuan, dan yang terakhir digunakan untuk mengikat warna bar kemajuan.

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

Seterusnya, dalam atribut templat komponen, kami memaparkan secara dinamik kod HTML komponen bar kemajuan berdasarkan pembolehubah yang ditakrifkan dalam atribut data. Terutamanya dengan mengikat nilai progressValue, lebar bar kemajuan berubah secara dinamik apabila data dikemas kini:

<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>

Akhir sekali, dalam atribut kaedah komponen, kami mentakrifkan kaedah kemas kini, di mana Dapatkan permulaan data bar kemajuan semasa melalui permintaan tak segerak Ajax, dan panggil kaedah updateProgress untuk mengemas kini data komponen:

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;
    }
  }
}

Kini, komponen bar kemajuan Vue.js kami sudah boleh melepasi kaedah kemas kini dan melaksanakan pengikatan data asas tetap dan dikemas kini secara dinamik.

3. Gunakan pemalam Vue.js untuk merangkum komponen bar kemajuan

Selepas pelaksanaan mudah sebelumnya, kami telah memperoleh kod komponen bar kemajuan Vue.js yang boleh digunakan. Seterusnya, kami akan merangkumkan kod ini ke dalam pemalam Vue.js.

Pertama, kami perlu mencipta pemalam VProgress baharu dalam projek Vue.js kami dan mentakrifkan kaedah pemasangan global dalam fail index.js pemalam untuk mendaftarkan bar kemajuan Vue.js komponen :

import VProgress from './vprogress.vue';

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

export default install;

Atas dasar ini, kami juga boleh menyediakan item konfigurasi global tambahan dan kaedah pendaftaran global untuk pemalam. Sebagai contoh, kami mentakrifkan item konfigurasi global untuk pemalam:

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;

Kami menambah item konfigurasi global untuk pemalam Warna lalai ialah warna bar kemajuan dan kelewatan ialah selang antara dua kemas kini. Setiap kali kami mengemas kini bar kemajuan, kami boleh mengemas kini nilai dan nilai warna bar kemajuan melalui kaedah global seperti kaedah Vue.prototype.$vprogress.update, dan kami boleh mengawal selang kemas kini melalui Vue.prototype. $vprogress.masa tunda.

Akhir sekali, kami membungkus kod di atas dan menjana contoh pemalam VProgress yang boleh digunakan untuk digunakan dalam pelbagai projek Vue.js.

4. Gunakan komponen bar kemajuan Vue.js

Sekarang, kami menggunakan pemalam VProgress dalam projek Vue.js baharu. Kaedah penggunaan adalah sangat mudah. ​​Anda hanya perlu mendaftarkannya melalui kaedah Vue.use() dalam fail masukan main.js aplikasi Vue:

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

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

Di sini, kami juga boleh meneruskannya melalui Kaedah Vue.use() Masukkan objek pilihan untuk mengatasi item konfigurasi pemalam VProgress lalai.

Seterusnya, dalam templat, kita hanya perlu menggunakan komponen VProgress secara terus dan memanggil kaedah $vporgress.update untuk mengemas kini nilai dan nilai warna bar kemajuan:

<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>

Kami menggunakan kaedah setInterval Kemas kini secara automatik nilai bar kemajuan Selang ditetapkan oleh $vprogress.delay Setiap kali bar kemajuan mengemas kini data, nilai dan parameter warna bar kemajuan akan dikemas kini secara automatik mengikut item konfigurasi global. pemalam dan konfigurasi tempatan projek Warna dan masa tunda bar kemajuan dikemas kini dengan sewajarnya.

5. Ringkasan

Melalui demonstrasi di atas, kami mempelajari cara menggunakan pemalam Vue.js untuk merangkum komponen bar kemajuan dan menggunakannya semula dalam aplikasi Vue.js. Contoh kod dalam artikel ini bertujuan untuk membantu pembaca yang baru menggunakan Vue.js dengan cepat memahami kaedah pelaksanaan asas pemalam Vue.js dan logik pelaksanaan asas komponen bar kemajuan, meletakkan asas untuk pembangunan tersuai kemudian. komponen dan pemalam.

Atas ialah kandungan terperinci Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen bar kemajuan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!