如何使用 Vue 實現折角卡片組件？-Vue.js-PHP中文網

在 Web 開發中，卡片式佈局一直都是流行的設計趨勢之一。現在，隨著越來越多的應用程式開始使用 Vue.js，開發者也開始探索如何使用 Vue.js 實作卡片元件。

本文將介紹如何使用 Vue.js 實現折角卡片元件，同時示範如何透過添加過渡效果，使卡片組件更加生動。

什麼是折角卡片組件？

折角卡組件是一種具有視覺吸引力的UI 設計，它可以透過將卡片的頂部角落折疊起來，以創建出一個獨特的形狀，像這樣：

< img src="https://i.imgur.com/2j9ewm5.png" alt="折角卡組件" style="width: 500px;"/>

#折角卡組件通常有標題和描述以及一個按鈕，用於引導使用者進行特定的操作。在本文中，我們將實作一個簡單的折角卡片元件，並添加過渡效果，以使頁面元素更平滑地顯示和隱藏。

準備工作

在開始實作程式碼之前，您需要準備以下內容：

Vue CLI3：這將幫助我們輕鬆建立一個新的Vue 應用程式。
FontAwesome：這將是我們使用的向量圖示庫。
程式碼編輯器：建議使用 Visual Studio Code 或 Sublime Text 等流行且易於使用的文字編輯器。

好了，讓我們開始吧！

建立 Vue 應用程式

使用 Vue CLI3 建立新的 Vue 應用程式是最快捷且最方便的方法。首先，請確保您在本機上安裝了 Vue CLI3。如果沒有，請使用以下命令進行安裝：

npm install -g @vue/cli

登入後複製

安裝完成後，可以使用以下命令來建立一個新的Vue 應用程式：

vue create my-app

登入後複製

這裡「my-app」是您的項目名稱。確保您在命令列中切換到正確的目錄，並將 my-app 變更為您想要的名稱。

Vue CLI3 會在您的資料夾中自動建立一個新的 Vue 應用程序，其中包含了一些基本的範本和檔案。

建立折角卡片元件

為了建立折角卡片元件，我們將在 Vue 範本中新增一個新的元件。此元件將包含卡片的所有元素，包括標題、描述和按鈕。讓我們從建立一個新的 Vue 單一檔案元件（SFC）開始，名稱為 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 和 buttonText 等屬性即可。

只是實現了卡片元件還不夠，您還需要將其添加到您的應用程式中，以便用戶可以看到和使用它。在本例中，在 App.vue 中包含了一個按鈕，可以開啟或關閉折角卡片元件。

至此，如何使用 Vue 實作折角卡片元件的教學到此結束。希望這個簡單的範例能幫助您快速掌握 Vue.js 的基礎知識，同時也會成為您未來開發專案的參考。

以上是如何使用 Vue 實現折角卡片組件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！