跳到主要内容

规格选择器 Sku Selector

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

API

安装使用​

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

用法示例​

基本用法​

import { mockSkuData } from './index.js';
import React from 'react';

const App: React.FC = () => {
    const onTiChange = () => {}
    const onTiOptionChange = () => {}

    const value = '1';
    const optionIds = ['1', '2', '3'];
    return (
        <>
            <TiSkuSelector
                onTiChange={onTiChange}
                onTiOptionChange={onTiOptionChange}
                skus={mockSkuData.skus}
                specs={mockSkuData.specs}
                value={value}
                optionIds={optionIds}
            />
        </>
    );
}

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;
}