跳到主要内容

规格选择器 Sku Selector

规格选择器，用于选择 SKU 的不同规格

API

安装使用​

import { TiSkuSelector } from 'titian-h5-react';

用法示例​

基本使用
codesanbox
copy
code

TiSkuSelector API​

属性 Properties​

名称类型必填默认值说明备注
skusSku[]是[]商品列表，见商品-
specsSpec[]是[]规格列表，见规格一个数组中的规格的 optionId 需要保持唯一
valuestring否-选中商品的 id；对应 skus 中的 skuId-
optionIdsstring[]否[]选中规格的 id；对应 specs 中的 optionId当不填 value 时生效
extStylestring否-根节点样式-

事件 Events​

名称参数列表描述备注
onTiChange(e: CustomEvent<{value: Sku}>) => void选中的 SKU 值变化时出发-
onTiOptionChange(e: CustomEvent<{options: [], optionIds: []}>) => void选中的规则变化时触发-

外部样式类 External Classes​

名称说明备注
extClass根节点样式类-

数据结构 Data Structure​

商品 Sku​

export interface Sku {
  skuId: string;
  specOptionIds: string[];
  stock: number;
  // ...
}

规格 Spec​

export interface Spec {
  label: string;
  specId: string;
  options: Array<SpecOption>;
}

export interface SpecOption {
  optionId: string;
  label: string;
}