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 e88b9898c40893438c3c47b74d21f31f digunakan untuk memaparkan bar kemajuan. Anda boleh mengawal kemajuan bar kemajuan dengan menetapkan atribut peratusan: e88b9898c40893438c3c47b74d21f31f 组件用于展示进度条。你可以通过设置 percentage 属性来控制进度条的进度：

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

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

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

3. 使用加载动画效果

Element-UI 提供了多种加载动画效果，包括骨架屏、加载中、折线图和雷达图等。你可以通过 63388405df0a04df98e38fc17215216b、85ad84baadb4310162f77a9565c97273、7bd1def68badf400cb93911c0640e528 和 6a6d805b0d5bc1e45a2198bde371ad89 等组件来使用这些效果。

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

3.1 使用骨架屏

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

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

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

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

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

3.2 使用加载中

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

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

<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 63388405df0a04df98e38fc17215216b, 85ad84baadb4310162f77a9565c97273, 7bd1def68badf400cb93911c0640e528 dan 1de761e86b58361fba6cbbd398504fd9 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 63388405df0a04df98e38fc17215216b 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 85ad84baadb4310162f77a9565c97273 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!