Coupon 优惠券选择器

引入

基础用法

CouponList Props

参数说明类型默认值
v-model:code当前输入的兑换码string-
chosen-coupon当前选中优惠券的索引number-1
coupons可用优惠券列表Coupon[]
disabled-coupons不可用优惠券列表Coupon[][]
enabled-title可用优惠券列表标题string可使用优惠券
disabled-title不可用优惠券列表标题string不可使用优惠券
exchange-button-text兑换按钮文字string兑换
exchange-button-loading是否显示兑换按钮加载动画booleanfalse
exchange-button-disabled是否禁用兑换按钮booleanfalse
exchange-min-length兑换码最小长度number
displayed-coupon-index滚动至特定优惠券位置number-
show-close-button是否显示列表底部按钮booleantrue
close-button-text列表底部按钮文字string不使用优惠
input-placeholder输入框文字提示string请输入优惠码
show-exchange-bar是否展示兑换栏booleantrue
currency货币符号string¥
empty-image列表为空时的占位图string-
show-count是否展示可用 / 不可用数量booleantrue

CouponList Events

名称说明
list-footer 优惠券列表底部
disabled-list-footer v3.0.18不可用优惠券列表底部

Coupon 数据结构

类型定义

名称默认值描述
—van-coupon-margin0 var(—van-padding-sm) var(—van-padding-sm)-
—van-coupon-content-height84px-
—van-coupon-content-padding14px 0-
—van-coupon-content-text-colorvar(—van-text-color)-
—van-coupon-backgroundvar(—van-background-2)-
—van-coupon-active-backgroundvar(—van-active-color)-
—van-coupon-radiusvar(—van-radius-lg)-
—van-coupon-shadow0 0 4px rgba(0, 0, 0, 0.1)-
—van-coupon-head-width96px-
—van-coupon-amount-colorvar(—van-danger-color)-
—van-coupon-amount-font-size30px-
—van-coupon-currency-font-size40%-
—van-coupon-name-font-sizevar(—van-font-size-md)-
—van-coupon-disabled-text-colorvar(—van-text-color-2)-
—van-coupon-description-paddingvar(—van-padding-xs) var(—van-padding-md)-
—van-coupon-description-border-colorvar(—van-border-color)-
—van-coupon-checkbox-colorvar(—van-danger-color)-
—van-coupon-list-backgroundvar(—van-background)-
—van-coupon-list-field-padding5px 0 5px var(—van-padding-md)-
—van-coupon-list-exchange-button-height32px-
—van-coupon-list-close-button-height40px-
—van-coupon-list-empty-tip-colorvar(—van-text-color-2)-
—van-coupon-list-empty-tip-font-sizevar(—van-font-size-md)-
—van-coupon-list-empty-tip-line-heightvar(—van-line-height-md)-
—van-coupon-cell-selected-text-colorvar(—van-text-color)-