Card 商品卡片 - Vant 4
Card 卡片
🛍️ 介紹
想像一下，你走進一家精美的商店，每件商品都被精心陳列在櫥窗裡 ✨。Card 卡片元件就是你的「數位櫥窗」！
這個小小的卡片承載著大大的使命 🎯：
- 📸 顏值擔當：精美的商品圖片展示，第一眼就抓住使用者的心
- 💰 價格透明：清晰的價格資訊，讓使用者一目了然
- 🏷️ 資訊豐富：標題、描述、標籤，該有的都有
- 🎨 高度定制：想要什麼樣的佈局？隨你心意！
無論是電商應用、產品展示還是內容卡片，Card 元件都能讓你的介面瞬間變得專業又吸引人。就像給每個商品都配了一個專屬的「形象代言人」 🌟！
📦 引入
透過以下方式來全域註冊元件，更多註冊方式請參考元件註冊。
import { createApp } from'vue'; import { Card } from'vant'; const app = createApp(); app.use(Card);🎯 程式碼演示
基礎用法
就像搭積木一樣簡單 🧱！最基礎的卡片包含了一個商品展示的「黃金三角」：精美圖片、吸引人的標題，還有那個讓人心動的價格 💝。
這就是 Card 元件的「素顏」狀態，簡約而不簡單，已經足夠讓你的商品閃閃發光了！
營銷資訊
想要製造「限時搶購」的緊迫感？想要突出「超值優惠」的誘惑力 🔥？
origin-price 就像是商品的「身分證」，展示原價讓使用者感受到優惠的力度。而 tag 標籤就像是商品左上角的「小紅旗」 🚩，無論是「新品」、「熱銷」還是「限量」，都能瞬間抓住使用者的眼球！
這些營銷元素就像是商品的「化妝師」，讓普通商品也能變得光彩奪目 ✨。
自訂內容
Card 元件就像一個「萬能魔盒」 🎁，提供了豐富的插槽讓你盡情發揮創意！
想要添加評分星星？想要放個購買按鈕？想要展示更多商品資訊？統統沒問題！就像在畫布上自由創作，想要什麼樣的佈局，完全由你的想像力決定 🎨！
API
Props
| 參數 | 說明 | 類型 | 預設值 |
|---|---|---|---|
| thumb | 左側圖片 URL | string | - |
| title | 標題 | string | - |
| desc | 描述 | string | - |
| tag | 圖片角標 | string | - |
| num | 商品數量 | *number | string* |
| price | 商品價格 | *number | string* |
| origin-price | 商品劃線原價 | *number | string* |
| centered | 內容是否垂直置中 | boolean | false |
| currency | 貨幣符號 | string | ¥ |
| thumb-link | 點擊左側圖片後跳轉的連結地址 | string | - |
| lazy-load | 是否開啟圖片懶載入，須配合 Lazyload 元件使用 | boolean | false |
Events
| 事件名 | 說明 | 回調參數 |
|---|---|---|
| click | 點擊時觸發 | event: MouseEvent |
| click-thumb | 點擊自訂圖片時觸發 | event: MouseEvent |
Slots
| 名稱 | 說明 |
|---|---|
| title | 自訂標題 |
| desc | 自訂描述 |
| num | 自訂數量 |
| price | 自訂價格 |
| origin-price | 自訂商品原價 |
| price-top | 自訂價格上方區域 |
| bottom | 自訂價格下方區域 |
| thumb | 自訂圖片 |
| tag | 自訂圖片角標 |
| tags | 自訂描述下方標籤區域 |
| footer | 自訂右下角內容 |
類型定義
元件匯出以下類型定義：
import type { CardProps } from'vant';主題定製
樣式變數
元件提供了下列 CSS 變數，可用於自訂樣式，使用方法請參考 ConfigProvider 元件。
| 名稱 | 預設值 | 描述 |
|---|---|---|
| --van-card-padding | var(--van-padding-xs) var(--van-padding-md) | - |
| --van-card-font-size | var(--van-font-size-sm) | - |
| --van-card-text-color | var(--van-text-color) | - |
| --van-card-background | var(--van-background) | - |
| --van-card-thumb-size | 88px | - |
| --van-card-thumb-radius | var(--van-radius-lg) | - |
| --van-card-title-line-height | 16px | - |
| --van-card-desc-color | var(--van-text-color-2) | - |
| --van-card-desc-line-height | var(--van-line-height-md) | - |
| --van-card-price-color | var(--van-text-color) | - |
| --van-card-origin-price-color | var(--van-text-color-2) | - |
| --van-card-num-color | var(--van-text-color-2) | - |
| --van-card-origin-price-font-size | var(--van-font-size-xs) | - |
| --van-card-price-font-size | var(--van-font-size-sm) | - |
| --van-card-price-integer-font-size | var(--van-font-size-lg) | - |
| --van-card-price-font | var(--van-price-font) | - |
🎯 最佳實踐
💡 使用場景推薦
Card 元件就像一個多面手，在各種場景下都能大顯身手：
🛒 電商商品展示
<!-- 突出促銷資訊，吸引使用者購買 -->
<van-card
:price="99.00"
:origin-price="199.00"
title="限時特惠商品"
desc="品質保證，限量發售"
tag="限時搶購"
thumb="https://example.com/product.jpg"
/>📱 應用推薦卡片
<!-- 展示應用資訊，引導下載 -->
<van-card
title="超好用的工具App"
desc="提升效率，簡化生活"
tag="編輯推薦"
>
<template #footer>
<van-button size="mini" type="primary">立即下載</van-button>
</template>
</van-card>📰 內容資訊卡片
<!-- 新聞文章展示 -->
<van-card
title="科技前沿：AI技術新突破"
desc="人工智慧領域又有重大進展..."
tag="熱門"
>
<template #tags>
<van-tag size="mini">科技</van-tag>
<van-tag size="mini">AI</van-tag>
</template>
</van-card>⚡ 效能最佳化小貼士
- 圖片懶載入：對於長列表，開啟
lazy-load可以顯著提升頁面效能 - 合理使用插槽：只在需要時使用自訂插槽，避免過度複雜化
- 圖片尺寸最佳化：確保商品圖片尺寸適中，避免載入過大的圖片
🎨 設計建議
- 資訊層級：價格資訊應該最突出，標題次之，描述最後
- 圖片品質：使用高品質的商品圖片，建議比例為 1:1 或 4:3
- 標籤使用：標籤要簡潔有力，避免過長的文字
- 色彩搭配：價格顏色可以使用品牌色或紅色來突出優惠感
🔧 常見問題解決
Q: 如何讓卡片內容垂直置中？ A: 設定 centered 屬性為 true，特別適合內容較少的卡片。
Q: 如何自訂價格顯示格式？ A: 使用 price 插槽可以完全自訂價格的顯示方式。
Q: 圖片載入失敗怎麼辦？ A: 可以透過 thumb 插槽自訂圖片元件，新增錯誤處理邏輯。
🔗 相關元件
- Image 圖片 - Card 元件的圖片展示基於此元件
- Tag 標籤 - 常用於 Card 元件的標籤展示
- Button 按鈕 - 常在 Card 的 footer 插槽中使用
- Lazyload 懶載入 - 配合 Card 實現圖片懶載入
- Grid 宮格 - 多個 Card 的網格佈局展示
📚 延伸閱讀
💡 小提示：一個好的商品卡片不僅僅是資訊的展示，更是使用者購買決策的重要影響因素。合理運用 Card 元件的各種特性，可以顯著提升使用者的購物體驗和轉化率！