在Vue.js中，構(gòu)建SKU組件需要使用JavaScript進(jìn)行邏輯處理。SKU是指庫存單位，常用于電商平臺的商品規(guī)格系統(tǒng)，可以實(shí)現(xiàn)多規(guī)格、多屬性的商品選擇。

下面代碼是一個簡單SKU組件的示例：

<template><div><div v-for="(item,index) in items" :key="index"><h4>{{ item.name }}</h4><div><span v-for="(val,subIndex) in item.values" :key="subIndex"><span @click="selected(index,subIndex)" :class="{active: val.selected}">{{ val.name }}
</span></span></div></div></div></template><script>export default {
data() {
return {
// 屬性集合
items: [
{
name: '顏色',
values: [
{ name: '黑色', selected: false },
{ name: '白色', selected: false },
{ name: '紅色', selected: false }
]
},
{
name: '尺寸',
values: [
{ name: '小', selected: false },
{ name: '中', selected: false },
{ name: '大', selected: false }
]
}
]
}
},
methods: {
// 選擇屬性
selected(itemIndex,subIndex) {
let item = this.items[itemIndex],
val = item.values[subIndex];
if(val.selected) {
val.selected = false;
} else {
item.values.forEach((v,index) =>{
if(subIndex === index) {
v.selected = true;
} else {
v.selected = false;
}
})
}
this.checkSelected();
},
// 檢查已選擇規(guī)格
checkSelected() {
let selected = this.items.every(item =>{
return item.values.some(val =>val.selected);
});
console.log(selected);
}
}
}
</script>

上述示例中，通過items數(shù)組定義SKU的屬性集合，包括屬性名和屬性值，其中selected值表示該屬性值是否已被選擇。然后通過selected方法來選擇屬性值并判斷是否所有規(guī)格都已選中。