更新记录

0.1.0（2026-03-12）

• 首次发布：底部弹出的「规格弹窗选择器」
• 支持多规格选择、数量加减、库存/限购校验
• 文档补充：组件所需数据结构与返回事件说明（更适合组件市场直接接入）

平台兼容性

uni-app(4.86)

其他

sku/规格弹窗选择器

• 注意 注意 注意 必须要导入官方的uni-popup、uni-scss和uni-transition组件才可以使用

一个“看起来像电商、用起来不费劲”的 SKU 规格选择弹窗：从底部弹出，选规格、选数量、看库存/限购，点一下就把结果回传给页面。

它不会内置你项目的接口请求（这样才适合上架组件市场）。你可以用它的 skuInfoMap 做本地映射，也可以监听 change 事件自己去请求后端，再把结果回灌给组件。

你会用到的能力

• 多规格：颜色/尺码/版本…多少组都行
• 数量选择：加减/输入都支持，并自动做上限约束
• 校验：未选全规格不允许确认；库存不足/超出限购会给出 toast
• 展示：主价 + 划线原价（如 ¥6.99 / ¥59.99）

安装方式

在插件市场找到本插件，点击“使用 HBuilderX 导入插件”即可。

使用方式（只告诉你需要什么数据）

这个组件只做两件事：让用户选择规格 + 选择数量，然后把结果通过事件抛给你。

• 你给它：skuList、productInfo（可选）以及你希望展示的 skuInfo / skuInfoMap
• 它还给你：用户选了什么（selectedSku / selectedText）、选了几件（quantity）、以及你回灌的 skuInfo

API

Props

Events

交互说明

• 商品图支持点击预览：点击左上角商品图会调用 uni.previewImage 全屏预览当前图片（优先预览 SKU 图 picsrc，没有则用 productInfo.image）。

skuList 数据结构

[
  {
    skuTypeTitle: '颜色',
    skuValueTitleList: ['黑色', '白色', '红色']
  },
  {
    skuTypeTitle: '尺码',
    skuValueTitleList: ['S', 'M', 'L']
  }
]

skuInfo / skuInfoMap 值结构（建议字段）

{
  price: '¥6.99',
  originalPrice: '¥59.99',
  stock: 20,      // 库存
  sy: 3,          // 限购（可选）
  id: 123,        // sku id（可选）
  picsrc: '...'   // sku 图（可选）
}

最推荐的接入思路（两种）

方案 A：你有后端接口（更常见）

• 用户每点一次规格，组件会触发 change({ selectedSku, selectedText })
• 你在 change 里拿到 selectedText（例如 "黑色;S"），去请求后端拿到对应的价格/库存/限购/图片
• 再把结果通过 skuInfo 回传给组件（或存进 skuInfoMap[selectedText]）

方案 B：你只有本地映射（例如活动页 / 静态商品）

• 你提前准备一个 skuInfoMap（key 为 selectedText）
• 组件会自动从 skuInfoMap[selectedText] 取出并展示价格/库存等信息

更新日志

见 changelog.md