组件库文档 tmui.design
商品属性选择 Sku
超过指定高度,默认隐藏更多内容。
🌶️ 商品属性选择 Sku 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<view class="pa-32">
<tm-button @click="show = true;" label="打开购买窗口" block linear="left" linear-deep="accent" color="red" :font-size="32" :round="24"></tm-button>
</view>
<tm-sheet>
<tm-text label="这个sku组件,商品的可选属性是不限制的,不管是显示尺码,颜色,型号,还是就显示一个颜色。可以随意的控制。"></tm-text>
</tm-sheet>
<tm-sku @buy="buy" :num="num"
:height="900"
:sku-map="[
{key:'size',value:'商品尺码'},
{key:'color',value:'商品颜色'},
{key:'model',value:'商品型号'},
]" :list="list" v-model:show="show"></tm-sku>
</tm-app>
</template>
<script lang="ts" setup>
import tmSku from '@/tmui/components/tm-sku/tm-sku.vue';
import tmApp from '@/tmui/components/tm-app/tm-app.vue';
import tmButton from "@/tmui/components/tm-button/tm-button.vue";
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue";
import tmText from "@/tmui/components/tm-text/tm-text.vue";
import { Ref, ref } from "vue"
const show = ref(false)
const list= ref({
data:[
{
title:"颜色类型",
id:"test",
children:[
{
title:"白色",
id:"a",
num: 5
},
{
title:"黑色",
id:"b",
num: 5
},
]
},
{
title:"尺码表",
id:"model",
children:[
{
title:"XS",
id:"a",
num: 5
},
{
title:"S",
id:"b",
num: 5
},
]
},
{
title:"款式",
id:"style",
children:[
{
title:"套装",
id:"a",
num: 0
},
{
title:"单件",
id:"b",
num: 5
},
]
}
],
product:[
{ id: "a-a-a", title: "白色-XS-套装", num: 0,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/2328862868/O1CN01b5pglN1X3ahprbU9P_!!2328862868.jpg' },
{ id: "a-a-b", title: "白色-XS-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i3/2328862868/O1CN01UBMJfy1X3af4Lc3ME_!!2328862868.jpg' },
{ id: "a-b-a", title: "白色-S-套装", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/TB1fw40oAvoK1RjSZPfSutPKFXa.jpg' },
{ id: "a-b-b", title: "白色-S-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/398719215/O1CN01zgD6Xi2HwWY8U589Z_!!398719215.jpg' },
{ id: "b-a-a", title: "黑色-XS-套装", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/TB1fw40oAvoK1RjSZPfSutPKFXa.jpg' },
{ id: "b-a-b", title: "黑色-XS-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i3/2328862868/O1CN01UBMJfy1X3af4Lc3ME_!!2328862868.jpg' },
{ id: "b-b-a", title: "黑色-S-套装", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/2328862868/O1CN01b5pglN1X3ahprbU9P_!!2328862868.jpg' },
{ id: "b-b-b", title: "黑色-S-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/TB1fw40oAvoK1RjSZPfSutPKFXa.jpg' },
]
})
const num = ref(2)
function buy(e:any){
console.log(e)
}
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
height | Number | 650 | 弹层高度。 |
color | String | 'red' | 主题 |
show | Boolean | false | 可使用双向绑定v-model:show |
round | Number | 6 | 圆角 |
num | Number | 1 | 购物数量 |
list | Tmui.sku | 格式见下方 | 数据属性 |
list格式
interface skuItem{
title:string,
id:string|number,
num:number,
children:skuItem[]
}
interface sku {
data:skuItem[],
product:{
id: string,
title: string,
num: number,
max_buy:number,
/** 原价 */
price: number,
/** 优惠价 */
salePrice: 54,
tip: string,
img:string
}[]
}
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
@buy | 点击购买按钮时触发 | ||
@add | 添加购车时触发 | ||
@open | 打开弹层时触发 | ||
@close | 关闭弹层时触发 |
🌽 slot插槽
属性名称 | 类型 | 数据 | 说明 |
---|---|---|---|
foot | 底部按钮区域 | ||
default | 在头部,内容插槽 |
🥗 ref方法
无