1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 Card：
<template>
<div>
<!-- 商品卡片列表 -->
<van-card v-for="product in products" :key="product.id">
<!-- 商品图片 -->
<img :src="product.image" alt="Product Image" class="card-image" />
<!-- 商品标题 -->
<div class="card-title">{{ product.title }}</div>
<!-- 商品描述 -->
<div class="card-desc">{{ product.description }}</div>
<!-- 商品价格 -->
<div class="card-price">{{ product.price }}</div>
<!-- 其他商品信息，可以根据需要添加 -->
</van-card>
</div>
</template>
<script>
import { VanCard } from 'vant';
export default {
components: {
VanCard
},
data() {
return {
products: [
{
id: 1,
title: '商品1',
description: '这是商品1的描述',
price: '￥100',
image: 'https://example.com/product1.jpg'
},
{
id: 2,
title: '商品2',
description: '这是商品2的描述',
price: '￥150',
image: 'https://example.com/product2.jpg'
},
// 可以继续添加其他商品
]
};
}
};
</script>
<style scoped>
/* 样式可以根据需求自定义 */
.card-image {
width: 100%;
height: 150px;
object-fit: cover;
}
.card-title {
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.card-desc {
font-size: 14px;
color: #666;
margin-top: 5px;
}
.card-price {
font-size: 18px;
color: #f40;
margin-top: 10px;
}
</style>
在上述示例中，van-card 组件用于创建商品卡片，通过循环渲染展示多个商品。通过设置 v-for 指令，你可以根据商品数据动态生成多个商品卡片。
上述样式是一个简单的示例，你可以根据实际需求自定义样式，以满足你的项目要求。
转载请注明出处：http://www.zyzy.cn/article/detail/5860/Vant