<template>
?? ??? ?<div class="popupSub">已選規(guī)格：{{showSelectSpec}}</div>
? ? ? ? ? <div class="subItem" v-for="(item,index) in subItemList" :key="index">
? ? ? ? ? ? <div class="itemTitle">{{item.itemTitle}}</div>
? ? ? ? ? ? <div class="itemContent">
? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li
? ? ? ? ? ? ? ? ? v-for="(res,resIndex) in item.itemContent"
? ? ? ? ? ? ? ? ? :key="res"
? ? ? ? ? ? ? ? ? @click="selectItem(res,index,$event,resIndex)"
? ? ? ? ? ? ? ? ? :class="subIndex[index] == resIndex?'selectActive':'itemLi'"
? ? ? ? ? ? ? ? >{{res}}</li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
</template>
<script>
export default {
?? ?data() {
?? ??? ?return {
?? ??? ? ?showSelectSpec: "",
?? ? ? ? ?subItemList: [
?? ? ? ? ? ?{
?? ? ? ? ? ? ?itemTitle: "味道",
?? ? ? ? ? ? ?itemContent: ["原味", "獼猴桃味", "橙子味", "蘋果味", "菠蘿味"]
?? ? ? ? ? ?},
?? ? ? ? ? ?{
?? ? ? ? ? ? ?itemTitle: "容量",
?? ? ? ? ? ? ?itemContent: ["300ML", "400ML", "500ML", "1000ML"]
?? ? ? ? ? ?}
?? ? ? ? ?],
?? ? ? ? ?selectArr: [], // 存放被選中的值
?? ? ? ? ?subIndex: [] // 是否選中 因?yàn)椴淮_定是多規(guī)格還是但規(guī)格，所以這里定義數(shù)組來(lái)判斷
?? ??? ?}
?? ?},
?? ?methods: {
?? ??? ?selectSpec(index) {
?? ? ? ? ?let t = this;
?? ? ? ? ?t.showSpec = true;
?? ? ? ?},
?? ? ? ?selectItem(res, index, enevt, resIndex) {
?? ? ? ? ?let t = this;
?? ? ? ? ?if (t.selectArr[index] !== res) {
?? ? ? ? ? ?t.selectArr[index] = res;
?? ? ? ? ? ?t.subIndex[index] = resIndex;
?? ? ? ? ?} else {
?? ? ? ? ? ?t.selectArr[index] = "";
?? ? ? ? ? ?t.subIndex[index] = -1; // 去掉選中的顏色
?? ? ? ? ?}
?? ? ? ? ?t.checkItem();
?? ? ? ?},
?? ? ? ?checkItem: function() {
?? ? ? ? ?var self = this;
?? ? ? ? ?var option = self.subItemList;
?? ? ? ? ?var result = []; // 定義數(shù)組存儲(chǔ)被選中的值
?? ? ? ? ?console.log(JSON.parse(JSON.stringify(self.selectArr)));
?? ? ? ? ?for (let i in option) {
?? ? ? ? ? ?result[i] = self.selectArr[i] ? self.selectArr[i] : "";
?? ? ? ? ?}
?? ? ? ? ?for (let i in option) {
?? ? ? ? ? ?var last = result[i]; // 把選中的值存放到字符串last去
?? ? ? ? ? ?for (let k in option[i].item) {
?? ? ? ? ? ? ?result[i] = option[i].item[k].name; // 賦值，存在直接覆蓋，不存在往里面添加name值
?? ? ? ? ? ? ?console.log("這里:", JSON.parse(JSON.stringify(result)));
?? ? ? ? ? ?}
?? ? ? ? ? ?result[i] = last; // 還原，目的是記錄點(diǎn)下去那個(gè)值，避免下一次執(zhí)行循環(huán)時(shí)避免被覆蓋
?? ? ? ? ?}
?? ? ? ? ?self.$forceUpdate(); // 重繪
?? ? ? ? ?self.showSelectSpec = self.selectArr.join("、");
?? ? ? ? ?console.log(self.showSelectSpec);
?? ? ? ?}
?? ?}
}
</script>
<style>
.popupSub {
? color: #aaaaaa;
? text-align: center;
? font-size: 0.8em;
? margin-top: 5px;
? letter-spacing: 2px;
}
.subItem {
? font-size: 0.8em;
? margin-top: 10px;
}
.itemContent ul,
li {
? display: flex;
? flex-wrap: wrap;
}
.itemContent ul li {
? padding: 0 10px;
? border-radius: 10px;
? margin-right: 10px;
? margin-top: 10px;
? height: 28px;
? line-height: 28px;
}
.itemLi {
? border: 1px solid #b3b3b3;
}
.selectActive {
? border: 1px solid #1697db;
? color: #1697db;
}
</style>