你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

规格选择器 TmSku

可单列或者多列

🌶️ 示例

查看模拟效果＋

示例模板

<template>
	<tm-sheet>
		<tm-text class="text-weight-b mb-16 d-block" font-size="36">规格选择器 TmSku</tm-text>
		<view>
			<tm-text>支持多规格单规格模式,快速的商品规格选择.</tm-text>
		</view>
	</tm-sheet>
	<tm-sheet>
		<tm-button block @click="openSku">打开sku</tm-button>
	</tm-sheet>
	<tm-sku v-model="selectedVal" v-model:model-show="show" :data="product"></tm-sku>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(false)
	const selectedVal = ref('b-2')
	const product : TM.SKU_DATA = {
		data: [
			{
				id: 'color',
				title: '颜色外观',
				children: [
					{ id: 'a', title: '沙漠色' },
					{ id: 'b', title: '原色钛' }
				]
			},
			{
				id: 'size',
				title: '容量',
				children: [
					{ id: '1', title: '256GB' },
					{ id: '2', title: '512GB', inventory_quantity: 0 },
					{ id: '3', title: '1TB' }
				]
			}
		],
		product: [
			{
				title: '沙漠色-256GB',
				id: 'a-1',
				inventory_quantity: 50,
				max_buy_quantity: 1,
				min_buy_quantity: 1,
				original_price: 5999,
				price: 4999,
				img: 'https://img10.360buyimg.com/n1/s800x800_jfs/t1/264648/17/5056/33086/67715a61Ff394bd13/fc6bec790465ee36.png'
			},
			{
				title: '沙漠色-512GB',
				id: 'a-2',
				inventory_quantity: 0,
				max_buy_quantity: 2,
				min_buy_quantity: 1,
				original_price: 6999,
				price: 5999,
				img: 'https://img10.360buyimg.com/n1/s800x800_jfs/t1/264648/17/5056/33086/67715a61Ff394bd13/fc6bec790465ee36.png'
			},
			{
				title: '沙漠色-1TB',
				id: 'a-3',
				inventory_quantity: 20,
				max_buy_quantity: 1,
				min_buy_quantity: 1,
				original_price: 9999,
				price: 8999,
				img: 'https://img10.360buyimg.com/n1/s800x800_jfs/t1/264648/17/5056/33086/67715a61Ff394bd13/fc6bec790465ee36.png'
			},
			{
				title: '原色钛-256GB',
				id: 'b-1',
				inventory_quantity: 50,
				max_buy_quantity: 3,
				min_buy_quantity: 1,
				original_price: 5999,
				price: 4999,
				img: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/260596/18/5137/32821/67715a71F1daf206d/103e0ea83209d416.png'
			},
			{
				title: '原色钛-512GB',
				id: 'b-2',
				inventory_quantity: 0,
				max_buy_quantity: 1,
				min_buy_quantity: 1,
				original_price: 6999,
				price: 5999,
				img: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/260596/18/5137/32821/67715a71F1daf206d/103e0ea83209d416.png'
			},
			{
				title: '原色钛-1TB',
				id: 'b-3',
				inventory_quantity: 50,
				max_buy_quantity: 2,
				min_buy_quantity: 1,
				original_price: 9999,
				price: 8999,
				img: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/260596/18/5137/32821/67715a71F1daf206d/103e0ea83209d416.png'
			}

		]
	}
	const openSku = () => {
		show.value = true
	}
</script>
<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
data	TM.SKU_DATA	():TM.SKU_DATA=>{return{data:[],product:null}asTM.SKU_DATA}	数据
modelValue	string|number	''	当前选中项的id值
modelShow	boolean	false	当前打开的状态。等同v-model:model-show
lazyContent	boolean	false	是否懒加载内部内容。当前你的列表内容非常多，且影响打开的动画性能时，请务必设置此项为true，以获得流畅视觉效果。如果选择数据较少没有必要打开
autoSelectDefault	boolean	true	是否自动选中一个默认值.会从产品列表默认选中第一个产品.
showAddStore	boolean	false	显示加购物车按钮
color	string	'primary'	按钮及选中的主题色

🌹 事件

事件名	参数	返回数据	描述
cancel	-	-	取消时触发
confirm	名称：ids,当前选中的产品,名称：buy,购买的数量,	-	确认触发
add	名称：ids,当前选中的产品,名称：buy,购买的数量,	-	加入购物车
update:modelShow	-	-	变量控制打开状态
等同v-model:model-show
update:modelValue	-	-	-

🌽 slot插槽

插槽名	数据	描述
add	-	添加购物车按钮
buy	-	支持按钮

🥗 ref方法

方法名	参数	返回值	描述