{site_name}

{site_name}

🌜 搜索

Vant3 Card 是一个基于 Vue.js 的轻量级卡片组件库,用于构建 Web 应用程序中的卡片式界面

前端 𝄐 0
vant选项卡,vant,vant-picker,vant dialog,vant mobile ui,vant 教程
Vant3 Card 是一个基于 Vue.js 的轻量级卡片组件库,用于构建 Web 应用程序中的卡片式界面。它提供了各种类型的卡片,包括内容卡片、图文卡片、商品卡片等,可以根据不同需求定制样式和布局。

以下是一个简单的 Vant3 Card 的示例:

html
<van-card
num="2"
price="¥18.00"
desc="这是一款好商品"
title="商品名称"
thumb="https://example.com/thumb.jpg"
>
<template v-slot:footer>
<div class="van-card__price">{{ price }}</div>
<div class="van-card__num">已售 {{ num }} 件</div>
</template>
</van-card>


这个示例展示了一个商品卡片,其中包含商品的图片、名称、价格和描述信息。卡片底部包含一个自定义的插槽,用于显示商品的销售数量和价格。使用 Vant3 Card 可以很方便地创建这样的卡片,并通过自定义插槽实现更加灵活的布局和样式。