<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(); }); },优化后代码
时间: 2024-03-26 12:37:02 浏览: 30
<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 {
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;
},
},
修改后的代码将六个全屏方法合并成了一个方法,通过传入不同的 index 参数来判断要全屏的组件,并且使用了一个 flags 数组来表示每个组件是否全屏。这样可以减少代码重复,并且更加方便维护。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
如何使用card控件里的图片具有设置地图中心点坐标功能?function setMapCente<body> <script type="text/javascript" class="map"> var map = new BMap.Map("baiduMap"); map.centerAndZoom(new BMap.Point(2.33269, 48.863727), 13); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("巴黎"); map.enableScrollWheelZoom(true); </script>
安纳西 >
安纳西 >
安纳西 >
安纳西 > </body>r(lat, lng) { var newCenter = new google.maps.LatLng(lat, lng); map.setCenter(newCenter); }
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)