Cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi

Cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi

Vue.js ialah rangka kerja bahagian hadapan yang ringan dan Element-UI ialah perpustakaan komponen UI berdasarkan Vue.js, yang menyediakan Komponen yang kaya dan kesan interaktif boleh membantu kami membangunkan antara muka hadapan yang cantik dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi.

1. Pasang dan perkenalkan Element-UI

Mula-mula, anda perlu memasang perpustakaan Element-UI. Pasang melalui npm atau benang:

npm install element-ui

Kemudian, perkenalkan gaya dan komponen Element-UI ke dalam fail kemasukan projek anda (biasanya main.js):

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2 Gunakan komponen bar kemajuan

Element-UI menyediakan Komponen <el-progress> digunakan untuk memaparkan bar kemajuan. Anda boleh mengawal kemajuan bar kemajuan dengan menetapkan atribut peratusan: <el-progress> 组件用于展示进度条。你可以通过设置 percentage 属性来控制进度条的进度：

<template>
  <el-progress :percentage="progress"></el-progress>
</template>

<script>
export default {
  data() {
    return {
      progress: 50
    };
  }
};
</script>

在上面的例子中，我们通过 progress 属性控制了进度条的进度为 50%。你可以根据实际需要，在 Vue 实例的数据中设置不同的 progress 值，从而实现动态的进度条效果。

3. 使用加载动画效果

Element-UI 提供了多种加载动画效果，包括骨架屏、加载中、折线图和雷达图等。你可以通过 <el-skeleton>、<el-loading>、<el-line> 和 <el-radial> 等组件来使用这些效果。

下面以骨架屏和加载中为例：

3.1 使用骨架屏

骨架屏是一种常见的加载效果，它通常用于页面或组件加载时展示一个预定的骨架结构，增加用户的等待体验。

元素UI提供了 <el-skeleton> 组件用于实现骨架屏效果。下面是一个简单的例子：

<template>
  <el-skeleton :loading="loading"></el-skeleton>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  }
};
</script>

在上面的例子中，我们通过 loading 属性控制了骨架屏的显示与隐藏。通过修改 loading 的值，你可以控制骨架屏的加载状态。

3.2 使用加载中

加载中是另一种常见的加载效果，它通常用于异步请求或操作时的等待提示。

元素UI提供了 <el-loading> 组件用于实现加载中效果。下面是一个简单的例子：

<template>
  <el-button @click="startLoading">点击开始加载</el-button>
</template>

<script>
export default {
  methods: {
    startLoading() {
      const loadingInstance = this.$loading({ text: '加载中...' });

      setTimeout(() => {
        loadingInstance.close();
      }, 2000);
    }
  }
};
</script>

在上面的例子中，我们通过调用 this.$loading 方法开始加载中效果，并通过 loadingInstance.close()rrreee

Dalam contoh di atas, kami mengawal kemajuan bar kemajuan kepada 50% melalui kemajuan atribut. Anda boleh menetapkan nilai kemajuan yang berbeza dalam data tika Vue mengikut keperluan sebenar untuk mencapai kesan bar kemajuan yang dinamik.

3. Gunakan kesan animasi pemuatan

Element-UI menyediakan pelbagai kesan animasi pemuatan, termasuk skrin rangka, pemuatan, carta garisan, carta radar, dsb. Anda boleh menggunakan <el-skeleton>, <el-loading>, <el-line> dan < el-radial> dan komponen lain untuk menggunakan kesan ini.

Yang berikut mengambil skrin rangka dan memuatkan sebagai contoh: 🎜

3.1 Menggunakan skrin rangka

🎜Skrin rangka ialah kesan pemuatan biasa Ia biasanya digunakan untuk memaparkan struktur rangka yang telah ditetapkan apabila halaman atau komponen sedang dimuatkan , untuk meningkatkan pengalaman menunggu pengguna. 🎜🎜UI Elemen menyediakan komponen <el-skeleton> untuk mencapai kesan skrin rangka. Berikut ialah contoh mudah: 🎜rrreee🎜Dalam contoh di atas, kami mengawal paparan dan penyembunyian skrin rangka melalui atribut loading. Dengan mengubah suai nilai loading, anda boleh mengawal status pemuatan skrin rangka. 🎜

3.2 Menggunakan Pemuatan

🎜Pemuatan ialah satu lagi kesan pemuatan biasa, yang biasanya digunakan untuk gesaan menunggu semasa permintaan atau operasi tak segerak. 🎜🎜UI elemen menyediakan komponen <el-loading> untuk mencapai kesan pemuatan. Berikut ialah contoh mudah: 🎜rrreee🎜Dalam contoh di atas, kami memulakan kesan pemuatan dengan memanggil kaedah this.$loading dan lulus loadingInstance.close() Kaedah ini menamatkan kesan pemuatan. Anda boleh melaraskan masa paparan pemuatan mengikut keperluan perniagaan tertentu. 🎜🎜Kesimpulan🎜🎜Melalui pengenalan artikel ini, anda telah mempelajari cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi. Bar kemajuan boleh digunakan untuk menunjukkan kemajuan operasi, dan memuatkan animasi boleh meningkatkan pengalaman menunggu pengguna. Anda boleh menggabungkan komponen dan kesan lain yang disediakan oleh Element-UI mengikut keperluan anda sendiri untuk memperkayakan lagi antara muka hadapan anda. 🎜🎜Artikel ini hanya memperkenalkan beberapa kaedah penggunaan asas Element-UI mempunyai banyak komponen dan fungsi lain yang boleh diterokai. Jika anda berminat dengan Element-UI, anda boleh menyemak dokumentasi rasmi untuk mendapatkan maklumat lanjut dan meningkatkan kemahiran pembangunan bahagian hadapan anda dengan cepat. 🎜

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!