TMUI 3.1.1
键入关键记事 K

Appearance

On this page

组件库文档 tmui.design ​

优惠券 Coupon ​

常用优惠券、卡券模板。

🌶️ 优惠券 Coupon 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text label="优惠券样例"></tm-text>
		</tm-sheet>
		<tm-coupon extra thumb="https://picsum.photos/200/300">
			<template v-slot:extra>
				<tm-text :font-size="22" _class="opacity-7" label="1.使用不受限制"></tm-text>
				<tm-text :font-size="22" _class="opacity-7" label="2.使用不受限制使用"></tm-text>
				<tm-text :font-size="22" _class="opacity-7" label="3.使用不受限制使用"></tm-text>
			</template>
		</tm-coupon>
		<tm-coupon extra :show-right="false">
			<template v-slot:extra>
				<tm-text :font-size="22" _class="opacity-7" label="1.使用不受限制"></tm-text>
				<tm-text :font-size="22" _class="opacity-7" label="2.使用不受限制"></tm-text>
			</template>
		</tm-coupon>
		<tm-coupon mainColor="pink"></tm-coupon>
		<tm-coupon mainColor="pink">
			<template v-slot:btn>
				<tm-checkbox color="pink" :round="24"></tm-checkbox>
			</template>
		</tm-coupon>
		<tm-coupon disable btn-label="已经使用"></tm-coupon>
		<tm-sheet>
			<tm-text label="其它样式设定"></tm-text>
		</tm-sheet>
		<tm-coupon
			color="orange"
			linear="right"
			linear-deep="accent"
			mainColor="orange"
			font-color=""
			thumb="https://picsum.photos/200/300"
		></tm-coupon>
		<tm-coupon color="pink" linear="right" linear-deep="accent" mainColor="yellow" font-color="" extra>
			<template v-slot:extra>
				<tm-text :font-size="22" _class="opacity-7" label="1.使用不受限制"></tm-text>
				<tm-text :font-size="22" _class="opacity-7" label="2.使用不受限制"></tm-text>
			</template>
		</tm-coupon>
		<tm-coupon color="yellow" mainColor="pink" font-color="" extra>
			<template v-slot:extra>
				<tm-text :font-size="22" _class="opacity-7" label="1.使用不受限制"></tm-text>
				<tm-text :font-size="22" _class="opacity-7" label="2.使用不受限制"></tm-text>
			</template>
		</tm-coupon>
	</tm-app>
</template>

<script lang="ts" setup>
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmCoupon from '../../tmui/components/tm-coupon/tm-coupon.vue'
import tmText from '../../tmui/components/tm-text/tm-text.vue'
import tmCheckbox from '../../tmui/components/tm-checkbox/tm-checkbox.vue'
</script>

<style></style>

🌶️ 兼容性 ​

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
marginArray<number>[32,24]左右下间距
fontColorStringblack除金额和按钮外的其它字体颜色
colorStringwhite背景
mainColorStringred金额和按钮字体颜色
btnTextModeBooleanfalse是否让按钮为浅色背景
btnLabelString"立即使用"按钮文本
disableBooleanfalse禁用，相当于已经使用
extraBooleanfalse是否展示更多的详情内容
extraActiveBooleanfalse展开更多的详情内容，必须把extra设置为true
moreTextString"规则详情"展开更多内容的提示文字
showRightBooleantrue是否显示左右头像或者金额文本
thumbString""左边图片，如果为空则显示默认的金额，如果为图片地址，则优先显示图片
priceDetailObject<surplice>{}左边显示金额时的数据，格式见下方
rightDetailObject<rightSurplice>{}右边显示的数据，格式见下方
disableColorstringgrey-1被禁用时的主题色
disableBgColorstringgrey-3被禁用时的背景主题色

priceDetail格式

ts
export interface surplice {
    price:number|string,//价格金额
    suffix:string,//后缀文本
    prefix:string,//前缀文本
    subtext:string//小文本
}

rightDetail格式

ts
export interface rightSurplice {
    title:number|string,//标题
    subtitle:string,//副标题
    time:string,//有效期时间文本
}

🌹 事件 ​

事件名参数返回数据描述
click--右边按钮被点击时触发

🌽 slot插槽 ​

插槽名参数描述
thumb-左边头像或者金额的插槽
btn-按钮插槽
extra-客户更多内容的插槽
default-默认插槽，右边标题和副标题插槽

🥗 ref方法 ​

无