需求描述
有个搜索栏,总共有7个搜索条件(可想象为7个input输入框)支持搜索条件的展开与收缩,在A分辨率下,默认显示2个,隐藏5个。B分辨率下默认显示3个,隐藏4个。点击展开时则全部显示,点击收缩则回到默认状态
预期的效果
代码实现
<!--
@author: pan
@createDate: 2022-05-08 07:23
-->
<script>
export default {
name: 'AdvSearch',
data() {
return {
isSmall: false,
forceHidden: true,
}
},
computed: {
spanSize() {
if (this.isSmall) {
return 8
} else {
return 6
}
},
},
mounted() {
console.log(this.$children[0].$children)
const smallMedia = window.matchMedia('(max-width: 1600px)')
this.listenerSmallMedia(smallMedia)
smallMedia.addEventListener('change', this.listenerSmallMedia)
},
methods: {
listenerSmallMedia(smallMedia) {
console.log('listenerSmallMedia')
if (smallMedia.matches) {
this.isSmall = true
} else {
this.isSmall = false
}
},
needShow(idx) {
if (!this.forceHidden || (!this.isSmall && idx < 4)) {
// 如果不是强制隐藏 或 (不是小分辨率且当前项的索引号小于4)则显示
return true
} else {
// 其他情况都隐藏
return false
}
},
},
}
</script>
<template>
<div>
<h3>是否小分辨率:{
{ isSmall }}</h3>
<el-row :gutter="20">
<el-col ref="col" :span="spanSize">
<div class="grid-content bg-purple">条件1</div>
</el-col>
<el-col ref="col" :span="spanSize">
<div class="grid-content bg-purple">条件2</div>
</el-col>
<el-col v-if="needShow(3)" ref="col" :span="spanSize">
<div class="grid-content bg-purple">条件3</div>
</el-col>
<el-col v-if="needShow(4)" ref="col" :span="spanSize">
<div class="grid-content bg-purple">条件4</div>
</el-col>
<el-col v-if="needShow(5)" ref="col" :span="spanSize">
<div class="grid-content bg-purple">条件5</div>
</el-col>
<el-col v-if="needShow(6)" ref="col" :span="spanSize">
<div class="grid-content bg-purple">条件6</div>
</el-col>
<el-col v-if="needShow(7)" ref="col" :span="spanSize">
<div class="grid-content bg-purple">条件7</div>
</el-col>
<el-col ref="col" :span="spanSize">
<div class="grid-content bg-purple">
<el-button @click="forceHidden = false">展开</el-button>
<el-button @click="forceHidden = true">收缩</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<style lang="scss" scoped>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
margin-bottom: 20px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.forceHide {
display: none;
}
</style>