以下是一个简单的例子，演示如何在 Vue 项目中使用 Vant 的 van-coupon-list 和 van-coupon-cell 组件：
<template>
<div>
<!-- 使用 van-coupon-list 组件 -->
<van-coupon-list :coupons="couponList" @change="onChange">
<!-- 自定义列表项内容 -->
<template v-slot="{ coupon }">
<van-coupon-cell :coupon="coupon" />
</template>
</van-coupon-list>
</div>
</template>
<script>
export default {
data() {
return {
// 优惠券列表数据，需要提前准备好
couponList: [
{
id: '1',
condition: 100,
reason: '满100减10元',
},
// 其他优惠券数据...
],
};
},
methods: {
// 选择优惠券的回调
onChange(coupon) {
// 处理选择优惠券后的逻辑，coupon 参数包含了用户选择的优惠券信息
console.log('选择优惠券:', coupon);
},
},
};
</script>
在上述代码中：
- couponList 是一个包含优惠券数据的数组，每个优惠券包括 id、condition、reason 等信息。
- van-coupon-list 组件用于显示优惠券列表，通过插槽（slot）可以自定义列表项的内容。
- van-coupon-cell 组件用于选择优惠券，需要嵌套在 van-coupon-list 中。
通过这些属性，你可以根据实际需求配置 van-coupon-list 和 van-coupon-cell 组件的外观和行为。在 @change 事件回调中，你可以处理用户选择优惠券的逻辑。
确保在使用这两个组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { CouponList, CouponCell } from 'vant';
Vue.use(CouponList);
Vue.use(CouponCell);
转载请注明出处：http://www.zyzy.cn/article/detail/5707/Vant