<template>
<div class="custom-monitoring page">
<div
:class="[
'custom-box',
'shadow',
item.index === index && item.largen && 'all-page',
item.index !== currIndex && currLarge && 'none-page',
]"
v-for="(item, index) in customList"
:key="'customList' + index"
>
<div class="card-title card-title-flex">
<span>自定义监测{
{ index + 1 }}</span>
<span
class="iconfont iconquanping iconBtn"
@click="changeLarge(item)"
></span>
</div>
<div class="content shadow"></div>
</div>
</div>
</template>
<script>
export default {
name: "customMonitoring",
data() {
return {
currLarge: false, //当前是否有放大元素
currIndex: null, //当前放大元素下标
customList: [
{ largen: false, index: 0 },
{ largen: false, index: 1 },
{ largen: false, index: 2 },
{ largen: false, index: 3 },
],
};
},
methods: {
changeLarge(item) {
item.largen = !item.largen;
this.currLarge = item.largen;
this.currIndex = item.index;
},
},
};
</script>
<style lang="scss" scoped>
.custom-monitoring {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
overflow: hidden;
.custom-box {
transition: all 0.5s;
width: 49.5%;
height: 49%;
.content {
overflow: auto;
}
}
.all-page {
width: 100%;
height: 100%;
transition: all 0.5s;
}
.none-page {
width: 0;
height: 0;
transition: all 0.5s;
* {
display: none;
}
}
}
</style>
vue页面放大某个模块全屏写法
猜你喜欢
转载自blog.csdn.net/weixin_43844696/article/details/109471291
今日推荐
周排行