跳到主要内容

规格选择器 Sku Selector

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

API

安装使用​

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

用法示例​

基本用法​

<template>
  <TiSkuSelector
    @ti-change="onTiChange"
    @ti-option-change="onTiOptionChange"
    :skus="mockSkuData.skus"
    :specs="mockSkuData.specs"
    :value="value"
    :option-ids="optionIds"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiSkuSelector } from 'titian-h5-vue';
import { mockSkuData } from './index.js';

const value = ref('1');
const optionIds = ref(['1', '2', '3']);

const onTiChange = () => {}
const onTiOptionChange = () => {}
</script>

TiSkuSelector API​

属性 Properties​

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

事件 Events​

名称参数列表描述备注
ti-change(e: CustomEvent<{value: Sku}>) => void选中的 SKU 值变化时出发-
ti-option-change(e: 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;
}