Vant4 Coupon 优惠卷

介绍

用于优惠券的兑换和选择。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from vue;
import { CouponCell, CouponList } from vant;

const app = createApp();
app.use(CouponCell);
app.use(CouponList);

代码演示

基础用法

<!-- 优惠券单元格 -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style=""
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>

import { ref } from vue;

export default {
  setup() {
    const coupon = {
      available: 1,
      condition: 无门槛
最多优惠12元,
      reason: ,
      value: 150,
      name: 优惠券名称,
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: 1.5,
      unitDesc: 元,
    };

    const coupons = ref([coupon]);
    const showList = ref(false);
    const chosenCoupon = ref(-1);

    const onChange = (index) => {
      showList.value = false;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      coupons.value.push(coupon);
    };

    return {
      coupons,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
    };
  },
};

API

CouponCell Props

CouponList Props

CouponList Events

CouponList Slots

Coupon 数据结构

类型定义

组件导出以下类型定义：

import type { CouponCellProps, CouponListProps } from vant;

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。