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:

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 的 <template> 中使用 <transition> 标记来添加过渡效果：

<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 实现动态显示和隐藏卡片组件。我们还为 <transition> 设置了名称 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

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!