Vant4 Coupon 優(yōu)惠卷

介紹

用于優(yōu)惠券的兌換和選擇。

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

代碼演示

基礎(chǔ)用法

<!-- 優(yōu)惠券單元格 -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 優(yōu)惠券列表 -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <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: '無門檻\n最多優(yōu)惠12元',
      reason: '',
      value: 150,
      name: '優(yōu)惠券名稱',
      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 數(shù)據(jù)結(jié)構(gòu)

類型定義

組件導(dǎo)出以下類型定義：

import type { CouponCellProps, CouponListProps } from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。