1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 Coupon：
<template>
<div>
<!-- 优惠券列表 -->
<van-coupon
v-for="coupon in coupons"
:key="coupon.id"
:name="coupon.name"
:amount="coupon.amount"
:condition="coupon.condition"
:start-time="coupon.startTime"
:end-time="coupon.endTime"
:usage="coupon.usage"
/>
</div>
</template>
<script>
import { VanCoupon } from 'vant';
export default {
components: {
VanCoupon
},
data() {
return {
coupons: [
{
id: '1',
name: '满100减10元',
amount: 10,
condition: 100,
startTime: '2023-01-01',
endTime: '2023-12-31',
usage: '全场通用'
},
{
id: '2',
name: '新用户专享券',
amount: 20,
condition: 0,
startTime: '2023-01-01',
endTime: '2023-06-30',
usage: '仅限新用户'
},
// 可以继续添加其他优惠券
]
};
}
};
</script>
在上述示例中，van-coupon 组件用于创建优惠券列表页面。通过循环渲染展示多个优惠券。通过设置 v-for 指令，你可以根据优惠券数据动态生成多个优惠券列表项。
这只是一个简单的示例，你可以根据实际需求自定义 Coupon 的属性和样式，以满足你的项目要求。
转载请注明出处：http://www.zyzy.cn/article/detail/5864/Vant