sku选择器本质是状态组合与约束问题，需通过规格矩阵、库存映射和实时禁用策略实现，依赖data-属性语义化标记、可行集合校验及js驱动的状态管理。
SKU选择器本质是状态组合与约束问题
HTML本身没有“SKU选择器”这个组件，它只是静态结构；真正起作用的是JavaScript对商品规格的逻辑建模和DOM响应。你看到的“点击颜色变灰、尺码不可选”，背后是规格矩阵（如[[color, size], [color, memory]]）+ 库存映射 + 实时禁用策略，不是靠<select></select>或<input type="radio">堆出来的。
用data-属性标记规格值，别用value硬编码
很多初学者把value="red-42"写死在按钮上，结果后续要查库存、联动其他规格时根本没法拆解。正确做法是用语义化data-属性分离维度：
<button class="spec-btn" data-spec="color" data-value="red">红色</button> <button class="spec-btn" data-spec="size" data-value="42">42码</button>
这样JS里能统一用el.dataset.spec和el.dataset.value拿到上下文，组合成{color: 'red', size: '42'}去查库存表。
禁用逻辑必须基于当前已选规格的“可行集合”
常见错误是只禁用“无库存”的选项，却忽略“与其他已选项冲突”的情况。比如选了color=blue后，size=36明明有货，但{color: 'blue', size: '36'}这个组合实际没库存——这时它就得禁用。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先收集所有已选规格，生成当前组合键（如
"blue_36"） - 查预加载的
skuMap对象：skuMap['blue_36']?.stock > 0 - 遍历所有未选规格项，对每个候选值构造新组合键，检查是否存在于
skuMap中且有库存 - 不存在或库存为0 → 添加
disabled并移除active类
移动端点击穿透和状态残留是高频坑点
在iOS Safari或微信WebView里，快速连点两个规格按钮，常出现前一个按钮还留着active样式、或者后一个没触发click事件。根本原因是默认button在触摸场景下有300ms延迟，且:active伪类行为不一致。
解决方式很直接：
- 给所有
.spec-btn加touchstart监听，立刻移除其他同data-spec组的active类 - 用
pointer-events: none临时禁用按钮自身，避免连点 - 库存校验完成后再恢复
pointer-events: auto并设置新active - 绝对不要依赖
:active做核心状态反馈，所有视觉变化必须由JS控制class
真实项目里，SKU最麻烦的从来不是怎么画出来，而是当用户反复切换、退到上页再返回、横竖屏切换时，状态还能不能对得上库存数据——这要求每次渲染都从干净的初始状态出发，而不是靠DOM残留推断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
