vue可展开/收缩搜索条件且支持自适应功能

需求描述

有个搜索栏，总共有7个搜索条件（可想象为7个input输入框）支持搜索条件的展开与收缩，在A分辨率下，默认显示2个，隐藏5个。B分辨率下默认显示3个，隐藏4个。点击展开时则全部显示，点击收缩则回到默认状态

预期的效果

代码实现

<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">条件1div>
      el-col>
      <el-col ref="col" :span="spanSize">
        <div class="grid-content bg-purple">条件2div>
      el-col>
      <el-col v-if="needShow(3)" ref="col" :span="spanSize">
        <div class="grid-content bg-purple">条件3div>
      el-col>
      <el-col v-if="needShow(4)" ref="col" :span="spanSize">
        <div class="grid-content bg-purple">条件4div>
      el-col>
      <el-col v-if="needShow(5)" ref="col" :span="spanSize">
        <div class="grid-content bg-purple">条件5div>
      el-col>
      <el-col v-if="needShow(6)" ref="col" :span="spanSize">
        <div class="grid-content bg-purple">条件6div>
      el-col>
      <el-col v-if="needShow(7)" ref="col" :span="spanSize">
        <div class="grid-content bg-purple">条件7div>
      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>