Bagaimana untuk melaksanakan kesan pemuatan global dalam Vue

Dalam pembangunan bahagian hadapan, kami sering mempunyai senario di mana pengguna perlu menunggu data dimuatkan semasa interaksi dengan halaman web Pada masa ini, biasanya terdapat kesan pemuatan yang dipaparkan untuk mengingatkan pengguna untuk menunggu . Dalam rangka kerja Vue, tidak sukar untuk melaksanakan kesan pemuatan global Mari perkenalkan cara melaksanakannya.

Langkah 1: Buat pemalam Vue

Kami boleh mencipta pemalam Vue bernama loading, yang boleh dirujuk dalam semua kejadian Vue. Dalam pemalam, kita perlu melaksanakan dua kaedah berikut:

1. show(): digunakan untuk memaparkan kesan pemuatan
2. hide(): digunakan untuk menyembunyikan kesan pemuatan

Berikut ialah kod pemalam loading:

const Loading = {
  show() {
    // 显示loading效果的代码
  },
  hide() {
    // 隐藏loading效果的代码
  }
}

export default {
  install(Vue) {
    Vue.prototype.$loading = Loading
  }
}

Dalam kod di atas, kami mentakrifkan objek bernama Loading, yang mengandungi kaedah untuk menunjukkan dan sembunyikan kesan pemuatan. Kaedah install() digunakan untuk memasang objek loading pada tika Vue supaya objek itu boleh dirujuk dalam semua tika Vue.

Langkah 2: Laksanakan komponen pemuatan

Untuk mencapai kesan pemuatan, kita perlu menambah lapisan pemuatan yang meliputi keseluruhan skrin pada komponen Vue. Ini boleh dicapai melalui CSS. Khususnya, kami boleh menambah dan memadam secara dinamik elemen DOM lapisan pemuatan dalam komponen Vue untuk memaparkan dan menyembunyikan kesan pemuatan. Berikut ialah komponen pemuatan mudah:

<template>
  <div v-if="visible" class="loading-mask">
    <div class="loading-spinner"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

<style>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Dalam kod di atas, kami mentakrifkan lapisan div bernama loading-mask, yang meliputi seluruh halaman dan menetapkan latar belakang hitam separa lutsinar. Di dalam loading-mask, kami menambah satu lagi lapisan div bernama loading-spinner, yang digunakan untuk memaparkan ikon pemuatan berputar. Akhir sekali, kami menentukan pembolehubah data dalam komponen Vue visible untuk menentukan sama ada lapisan pemuatan perlu dipaparkan.

Langkah 3: Gunakan pemuatan dalam komponen

Sekarang kami telah melaksanakan komponen pemuatan asas dan pemalam Vue, kami perlu menggunakannya dalam komponen Vue.

Mula-mula, perkenalkan pemalam Vue yang baru dibuat ke dalam komponen Vue, dan tambahkan komponen pemuatan pada komponen semasa:

<template>
  <div>
    <h1>这是一个Vue组件</h1>
    <loading ref="loading"></loading>
  </div>
</template>

<script>
import LoadingPlugin from '@/plugins/loading'
import Loading from '@/components/Loading'

export default {
  name: 'HelloWorld',
  components: {
    Loading
  },
  mounted() {
    this.$loading = this.$refs.loading
  },
  plugins: [
    LoadingPlugin
  ],
  methods: {
    fetchData() {
      this.$loading.show() // 显示loading效果
      // 发送请求
      // ...
      this.$loading.hide() // 隐藏loading效果
    }
  }
}
</script>

Dalam kod di atas, kami mula-mula memperkenalkan palam Vue- dalam dibuat sebelum LoadingPlugin, dan kemudian gunakan atribut components untuk menambah komponen pemuatan pada komponen semasa. Dalam kaedah mounted(), kami menetapkan contoh komponen pemuatan kepada atribut $loading, yang memudahkan kami memanggil kaedah tunjukkan dan sembunyikan dalam komponen semasa untuk menunjukkan dan menyembunyikan kesan pemuatan.

Akhir sekali, dalam kaedah fetchData(), kita boleh memanggil this.$loading.show() untuk memaparkan kesan pemuatan Selepas data dimuatkan, panggil kaedah this.$loading.hide() untuk menyembunyikannya. Dengan cara ini kami berjaya mencapai kesan pemuatan global.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara untuk melaksanakan kesan pemuatan global dalam rangka kerja Vue. Kami mencipta pemalam loading dan memasangnya ke dalam contoh Vue supaya ia boleh dipanggil dalam semua komponen Vue. Kami juga melaksanakan komponen pemuatan, di mana elemen DOM ditambah dan dipadamkan secara dinamik untuk memaparkan dan menyembunyikan kesan pemuatan. Akhir sekali, kami memanggil kaedah tunjukkan dan sembunyikan objek $loading dalam komponen Vue untuk menunjukkan dan menyembunyikan kesan pemuatan. Pelaksanaan ini membolehkan kami mencapai pengalaman pengguna yang baik, mengurangkan masa menunggu pengguna dan meningkatkan prestasi aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan pemuatan global dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!