跳到主要内容

规格选择器 Sku Selector

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

API

安装使用​

{
  // 原生小程序
  "usingComponents": {
    "ti-sku-selector": "@titian-design/weapp/sku-selector/index"
  },
  // titan-cli 搭建的项目
  "usingComponents": {
    "ti-sku-selector": "platform://titian-mp/ti-sku-selector"
  }
}

用法示例​

基本用法​

<ti-sku-selector
  bind:ti-change="onTiChange"
  bind:ti-option-change="onTiOptionChange"
  skus="{{mockSkuData.skus}}"
  specs="{{mockSkuData.specs}}"
  value="{{value}}"
  optionIds="{{optionIds}}"
/>

ti-sku-selector API​

属性 Properties​

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

事件 Events​

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

外部样式类 External Classes​

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

数据结构 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;
}