Bagaimana untuk melaksanakan komponen kad sudut menggunakan Vue?

Dalam pembangunan web, reka letak kad sentiasa menjadi salah satu trend reka bentuk yang popular. Kini, apabila semakin banyak aplikasi mula menggunakan Vue.js, pembangun juga mula meneroka cara menggunakan Vue.js untuk melaksanakan komponen kad.

Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan komponen kad sudut, dan juga menunjukkan cara untuk menjadikan komponen kad lebih jelas dengan menambahkan kesan peralihan.

Apakah komponen kad telinga anjing?

Komponen Cornered Card ialah reka bentuk UI yang menarik secara visual yang menghasilkan bentuk unik dengan melipat sudut atas kad, seperti ini:

0e0e7147c7a5fefef0f91fc4c0763bcc

Komponen Kad Sudut biasanya mempunyai tajuk dan penerangan serta butang untuk membimbing pengguna ke operasi tertentu. Dalam artikel ini, kami akan melaksanakan komponen kad bertelinga anjing yang mudah dan menambah kesan peralihan untuk menjadikan elemen halaman muncul dan bersembunyi dengan lebih lancar.

Persediaan

Sebelum anda mula melaksanakan kod, anda perlu menyediakan yang berikut:

• Vue CLI3: Ini akan membantu kami mencipta aplikasi Vue baharu dengan mudah.
• FontAwesome: Ini akan menjadi perpustakaan ikon vektor yang kami gunakan.
• Editor Kod: Adalah disyorkan untuk menggunakan editor teks yang popular dan mudah digunakan seperti Kod Visual Studio atau Teks Sublime.

Baiklah, mari mulakan!

Buat aplikasi Vue

Mencipta aplikasi Vue baharu menggunakan Vue CLI3 ialah cara terpantas dan paling mudah. Mula-mula, pastikan anda memasang Vue CLI3 secara setempat. Jika tidak, sila gunakan arahan berikut untuk memasangnya:

npm install -g @vue/cli

Setelah pemasangan selesai, anda boleh menggunakan arahan berikut untuk mencipta aplikasi Vue baharu:

vue create my-app

Di sini "aplikasi saya" ialah nama projek anda. Pastikan anda menukar ke direktori yang betul pada baris arahan dan menukar aplikasi saya kepada nama yang anda mahu.

Vue CLI3 akan membuat aplikasi Vue baharu secara automatik dalam folder anda, yang mengandungi beberapa templat dan fail asas.

Buat Komponen Kad Sudut

Untuk mencipta komponen Kad Sudut, kami akan menambah komponen baharu pada templat Vue. Komponen ini akan mengandungi semua elemen kad, termasuk tajuk, perihalan dan butang. Mari mulakan dengan mencipta Komponen Fail Tunggal (SFC) Vue baharu bernama FoldCard.vue. FoldCard.vue。

<template>
  <div class="fold-card">
    <div class="fold-card-header">
      <h2>{{ title }}</h2>
      <a href="#" class="fold-card-close" @click="closeCard">
        <i class="fas fa-times"></i>
      </a>
    </div>
    <div class="fold-card-content">
      <slot></slot>
    </div>
    <div class="fold-card-footer">
      <a href="#" class="button">{{ buttonText }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FoldCard',
  props: {
    title: String,
    buttonText: String
  },
  methods: {
    closeCard() {
      this.$emit('close-card');
    }
  }
};
</script>

<style scoped>
...
</style>

这个组件包含了折角卡片组件的所有基本元素，包括一个卡片头部的标题、描述、关闭按钮以及一个按钮，用于指示用户应该执行的操作。我们也添加了一个名为 closeCard() 的方法来关闭卡片。

我们也将使用 Font Awesome 来添加一个关闭图标。要使用 Font Awesome，您需要将以下代码添加到您的 Vue CLI3 项目的 index.html 中。

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-gfdkzPd1SlsUB7XvyH+K9CQv5gW5ceXw981FeynX+11mZsJ6oO8WQI5Tzya/vRLB"
  crossorigin="anonymous"
/>

实现折角

现在，我们将添加折角。为此，我们需要在卡片的两个相邻的边角处添加一个伪元素。

.framed {
  position: relative;
}

.framed::before,
.framed::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent #7386D5 transparent transparent;
}

.framed::after {
  right: -2px;
  border-width: 0 78px 80px 0;
  border-color: transparent #ADC7FF transparent transparent;
  z-index: -1;
}

我们使用 boder-style 创建具有零宽度和高度的斜线，使其能够覆盖所有四个角落。我们还使用 border-color 指定折角的颜色。

添加样式

我们将使用 CSS 样式为 fold-card 中的所有元素添加样式，以使其在页面中出现为卡片效果：

.fold-card {
  width: 320px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background-color: white;
  overflow: hidden;
  transition: all 0.3s ease;
}

在这里，我们添加了卡片的基本样式，包括卡片的圆角边框、阴影效果和背景颜色。

接下来，我们将为卡片的头部、内容和脚部添加样式：

.fold-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #7386D5;
}

.fold-card-header h2 {
  color: white;
  font-size: 22px;
  margin: 0;
}

.fold-card-header .fold-card-close {
  color: white;
}

.fold-card-content {
  padding: 20px;
}

.fold-card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #E5E5E5;
}

.fold-card-footer .button {
  background-color: #7386D5;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  text-decoration: none;
}

在这里，我们添加了头部、内容和脚部的背景颜色、文本样式和按钮样式。

添加过渡效果

为了使卡片组件更加生动，我们将使用 Vue 过渡和动画效果。这将为组件在页面中的出现和消失添加平滑的过渡。

首先，在 main.js 中添加以下代码：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

然后，我们将在 App.vue 的 d477f9ce7bf77f53fbcf36bec1b69b7a 中使用 300ff3b250bc578ac201dd5fb34a0004 标记来添加过渡效果：

<template>
  <div id="app">
    <div class="container">
      <transition name="fold">
        <FoldCard v-if="showCard" @close-card="closeCard">
          <p>{{ description }}</p>
        </FoldCard>
      </transition>
      <button class="button" @click="showCard = true">显示折角卡片</button>
    </div>
  </div>
</template>

在这里，我们使用了 Vue 的 v-if 实现动态显示和隐藏卡片组件。我们还为 300ff3b250bc578ac201dd5fb34a0004 设置了名称 fold，以实现平滑的折角过渡。最后，我们使用了 @close-card 事件来关闭卡片。

添加动画

为了使用动画效果，在 App.vue 中添加以下样式：

.fold-enter-active,
.fold-leave-active {
  transition-duration: 0.3s;
  transition-property: transform, opacity;
  transition-timing-function: ease;
}

.fold-enter {
  opacity: 0;
  transform: translateX(100%) rotate(45deg);
}

.fold-leave-to {
  opacity: 0;
  transform: translateX(100%) rotate(45deg);
}

在这里，我们为过渡添加了动画，包括旋转和平移等动画效果。

好了，现在，我们已经完成了折角卡片组件的设计和实现。您可以自己尝试一下，看看效果如何。在使用时，您只需向组件传递 title、description 和 buttonTextrrreee

Komponen ini mengandungi semua elemen asas komponen kad telinga anjing, termasuk tajuk pengepala kad, perihalan, butang tutup dan butang untuk menunjukkan tindakan yang perlu dilakukan oleh pengguna. Kami juga menambahkan kaedah yang dipanggil closeCard() untuk menutup kad. 🎜🎜Kami juga akan menggunakan Font Awesome untuk menambah ikon tutup. Untuk menggunakan Font Awesome, anda perlu menambah kod berikut pada index.html projek Vue CLI3 anda. 🎜rrreee🎜Melaksanakan chamfers🎜🎜Kini, kami akan menambah chamfers. Untuk melakukan ini, kita perlu menambah elemen pseudo pada dua sudut bersebelahan kad. 🎜rrreee🎜Kami menggunakan gaya boder untuk membuat garis miring dengan lebar dan tinggi sifar, membolehkan ia meliputi keempat-empat penjuru. Kami juga menggunakan warna sempadan untuk menentukan warna sudut. 🎜🎜Tambah gaya🎜🎜Kami akan menggunakan gaya CSS untuk menambah gaya pada semua elemen dalam fold-card supaya ia muncul sebagai kad pada halaman: 🎜rrreee🎜Di sini, kami telah menambah kad Basic gaya, termasuk jidar bulat, kesan bayang-bayang dan warna latar belakang kad. 🎜🎜Seterusnya, kami akan menambah gaya untuk pengepala, kandungan dan pengaki kad: 🎜rrreee🎜Di sini, kami telah menambahkan warna latar belakang, gaya teks dan gaya butang untuk pengepala, kandungan dan pengaki. 🎜🎜Tambah kesan peralihan🎜🎜Untuk menjadikan komponen kad lebih jelas, kami akan menggunakan peralihan Vue dan kesan animasi. Ini akan menambah peralihan lancar apabila komponen muncul dan hilang daripada halaman. 🎜🎜Mula-mula, tambah kod berikut dalam main.js: 🎜rrreee🎜Kemudian, kami akan menambah kod berikut dalam App.vue Gunakan <transition&gt ; tag untuk menambah kesan peralihan: 🎜rrreee🎜Di sini, kami menggunakan v-if Vue untuk memaparkan dan menyembunyikan komponen kad secara dinamik. Kami juga menetapkan nama fold untuk 300ff3b250bc578ac201dd5fb34a0004 untuk mencapai peralihan sudut yang lancar. Akhir sekali, kami menggunakan acara @close-card untuk menutup kad. 🎜🎜Tambah animasi🎜🎜Untuk menggunakan kesan animasi, tambah gaya berikut dalam App.vue: 🎜rrreee🎜Di sini, kami telah menambahkan animasi pada peralihan, termasuk kesan animasi seperti putaran dan terjemahan . 🎜🎜Baiklah, sekarang, kami telah menyelesaikan reka bentuk dan pelaksanaan komponen kad sudut. Anda boleh mencubanya sendiri dan lihat bagaimana ia berlaku. Apabila menggunakannya, anda hanya menghantar sifat title, description dan buttonText kepada komponen. 🎜

Melaksanakan komponen kad sahaja tidak mencukupi, anda juga perlu menambahkannya pada aplikasi anda supaya pengguna dapat melihat dan menggunakannya. Dalam kes ini, App.vue mengandungi butang yang menghidupkan atau mematikan komponen kad telinga anjing.

Ini menamatkan tutorial tentang cara menggunakan Vue untuk melaksanakan komponen kad sudut. Saya harap contoh mudah ini dapat membantu anda menguasai asas Vue.js dengan cepat, dan juga akan menjadi rujukan untuk projek pembangunan masa depan anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen kad sudut menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!