vue element 实现sku

### Vue3 实现 Sku 多规格功能 #### 创建基础结构 为了创建一个多规格 SKU 组件，在 Vue 3 中可以利用组合 API 和响应式特性来处理复杂的交互逻辑。首先，初始化一个新的 Vue 项目并安装必要的依赖项。 ```bash npm init vue@latest my-sku-project cd my-sku-project npm install ``` 接着，确保已安装 `element-plus` 或其他 UI 库用于界面构建[^2]： ```bash npm install element-plus ``` #### 定义数据模型 在 Vuex store 或者组件内部定义一个状态对象来保存当前选中的规格选项以及可用的选择列表。这有助于保持视图层与业务逻辑解耦合。 ```javascript // src/components/SKUComponent.vue import { ref, computed } from 'vue'; export default { setup() { const selectedOptions = ref({}); // 假设这是从服务器获取的数据 const availableSpecs = [ { name: '颜色', values: ['红色', '蓝色'] }, { name: '尺寸', values: ['S', 'M', 'L'] } ]; const skuCombination = computed(() => { let result = []; function combine(specIndex, currentPath) { if (specIndex === availableSpecs.length) { result.push(currentPath); return; } for (let value of availableSpecs[specIndex].values) { combine( specIndex + 1, `${currentPath}${value},${availableSpecs[specIndex].name}; ` ); } } combine(0, ''); return result.map((item) => item.slice(0, -2).split('; ').reduce((acc, cur) => { const [val, key] = cur.split(','); acc[key] = val; return acc; }, {}) ); }); return { selectedOptions, availableSpecs, skuCombination }; } } ``` 此代码片段展示了如何动态计算所有可能的 SKU 组合，并将其存储在一个计算属性中以便后续使用[^1]。 #### 构建用户界面 接下来是设计前端部分，这里采用简单的表格形式展示各个规格及其对应的价格和其他信息。对于每一个规格维度（比如颜色、大小），都应允许用户点击选择不同的值；当选择了完整的路径之后，则会显示最终的产品详情。 ```html <template> <div class="sku-container"> <!-- 遍历每个规格 --> <el-row v-for="(spec, index) in availableSpecs" :key="index"> {{ spec.name }}: <span v-for="optionValue in spec.values" :class="{ active: isSelected(optionValue, spec.name) }" @click="selectOption(optionValue, spec.name)" > {{ optionValue }} </span> </el-row> <!-- 显示所选SKU的具体描述 --> <pre>{{ JSON.stringify(selectedOptions, null, 2) }}</pre> </div> </template> <script lang="ts"> methods: { selectOption(value: string, specName: string): void { this.selectedOptions[specName] = value; console.log('Selected Options:', this.selectedOptions); }, isSelected(value: string, specName: string): boolean { return ( Object.prototype.hasOwnProperty.call(this.selectedOptions, specName) && this.selectedOptions[specName] === value ); } }; </script> ``` 上述 HTML 片段实现了基本的功能——让用户能够浏览不同规格下的商品变体，并实时查看他们所做的选择。 #### 测试和完善 完成初步开发后，务必进行全面测试以验证各种边界情况是否都能正常工作。此外还可以考虑加入更多高级特性的支持，例如库存查询、价格变动提示等。 ---