<div class="fullhot" :class="{ full: flag4 }"> <hot class="hot" ref="hot2"></hot> <div class="iconfont icon-expand-alt icon" @click="fullscreen4" v-if="!flag4" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen4" v-else ></div><div class="fullstock" :class="{ full: flag5 }"> <stock class="stock" ref="stock2"></stock> <div class="iconfont icon-expand-alt icon" @click="fullscreen5" v-if="!flag5" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen5" v-else ></div>data() { return { flag1: false, flag2: false, flag3: false, flag4: false, flag5: false, flag6: false, }; }, components: { hot, seller, trend, Map, rank, stock, }, methods: { changetheme() { this.$store.commit("tabtheme"); }, fullscreen1() { this.flag = true; this.$nextTick(() => { this.$refs.seller2.changesize(); }); }, fullscreen2() { this.flag1 = true; this.$nextTick(() => { this.$refs.trend2.screenAdapter(); }); }, fullscreen3() { this.flag2 = true; this.$nextTick(() => { this.$refs.rank2.screenAdapter(); }); }, fullscreen4() { this.flag3 = true; this.$nextTick(() => { this.$refs.hot2.screenAdapter(); }); }, fullscreen5() { this.flag4 = true; this.$nextTick(() => { this.$refs.stock2.screenAdapter(); }); }, fullscreen6() { this.flag5 = true; this.$nextTick(() => { this.$refs.map2.screenAdapter(); }); },优化后代码

<div class="fullhot" :class="{ full: flag4 }">
<hot class="hot" ref="hot2"></hot>
<div class="iconfont icon-expand-alt icon" @click="fullscreen4" v-if="!flag4"></div>
<div class="iconfont icon-compress-alt icon" @click="smallscreen4" v-else></div>
</div>
<div class="fullstock" :class="{ full: flag5 }">
<stock class="stock" ref="stock2"></stock>
<div class="iconfont icon-expand-alt icon" @click="fullscreen5" v-if="!flag5"></div>
<div class="iconfont icon-compress-alt icon" @click="smallscreen5" v-else></div>
</div>
data() {
return {
flags: [false, false, false, false, false, false],
};
},
components: {
hot,
seller,
trend,
Map,
rank,
stock,
},
methods: {
changetheme() {
this.$store.commit("tabtheme");
},
fullscreen(index) {
this.flags[index] = true;
this.$nextTick(() => {
switch (index) {
case 0:
this.$refs.seller2.changesize();
break;
case 1:
this.$refs.trend2.screenAdapter();
break;
case 2:
this.$refs.rank2.screenAdapter();
break;
case 3:
this.$refs.hot2.screenAdapter();
break;
case 4:
this.$refs.stock2.screenAdapter();
break;
case 5:
this.$refs.map2.screenAdapter();
break;
default:
break;
}
});
},
smallscreen(index) {
this.flags[index] = false;
},
},

优化后的代码将重复的部分整合为一个函数，并使用一个数组来存储每个组件的状态。同时，使用了 switch 语句来区分不同的组件，提高了代码的可读性和可维护性。