<div class="fulltrend" :class="{ full: flag1 }"> <trend class="trend" ref="trend2"> </trend> <div class="iconfont icon-expand-alt icon" @click="fullscreen1" v-if="!flag1" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen1" v-else ></div> </div> <div class="fullseller" :class="{ full: flag }"> <seller class="seller" ref="seller2"></seller> <div class="iconfont icon-expand-alt icon" @click="fullscreen" v-if="!flag" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen" v-else ></div> </div>data() { return { flag1: false, flag2: false, flag3: false, flag4: false, flag5: false, flag6:false, } }, computed:{ ...mapState(["theme"]) }, methods:{ changeTheme(){ this.$store.commit("tabTheme") }, full1(){ this.flag1= true; this.$nextTick(() => { this.$refs.rank2.screenAdapter(); }); }, full2() { this.flag2 = true; this.$nextTick(() => { this.$refs.rank2.screenAdapter(); }); }, full3() { this.flag3 = true; this.$nextTick(() => { this.$refs.hot2.screenAdapter(); }); }, full4() { this.flag4 = true; this.$nextTick(() => { this.$refs.stock2.screenAdapter(); }); }, full5() { this.flag5 = true; this.$nextTick(() => { this.$refs.map2.screenAdapter(); }); }, full6() { this.flag6 = true; this.$nextTick(() => { this.$refs.map2.screenAdapter(); }); },的优化
时间: 2024-03-26 15:34:40 浏览: 85
首先,可以将 `flag1` 到 `flag6` 改为一个数组 `flags`,使用 `v-for` 渲染,减少代码冗余。同时,也可以将 `full1` 到 `full6` 改为一个方法 `fullScreen`,传入一个参数代表 `flag` 数组的下标,减少重复的代码。
示例代码:
```
<template>
<div>
<div v-for="(flag, index) in flags" :key="index" :class="['full' + index]" :class="{ full: flag }">
<component :is="'component' + (index + 1)" :ref="'component' + (index + 1)"></component>
<div class="iconfont icon-expand-alt icon" @click="fullScreen(index)" v-if="!flag"></div>
<div class="iconfont icon-compress-alt icon" @click="smallScreen(index)" v-else></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
flags: [false, false, false, false, false, false],
};
},
computed: {
...mapState(['theme']),
},
methods: {
changeTheme() {
this.$store.commit('tabTheme');
},
fullScreen(index) {
this.flags[index] = true;
this.$nextTick(() => {
this.$refs['component' + (index + 1)].screenAdapter();
});
},
smallScreen(index) {
this.flags[index] = false;
this.$nextTick(() => {
this.$refs['component' + (index + 1)].screenAdapter();
});
},
},
};
</script>
```
阅读全文