sgSearch_v2源码

<template>
  <div
    :class="$options.name"
    :expand="expandSearch"
    :showCollapseBtn="showCollapseBtn"
    @keyup.enter="(expandSearch = true), $emit(`keyupEnter`, {})"
  >
    <ul class="search-list">
      <slot name="searchFilter"></slot>

      <ul class="sg-search-btns">
        <slot name="searchBtns"></slot>
        <el-button type="" @click="expandSearch = !expandSearch" v-if="showCollapseBtn">
          <template v-if="expandSearch">展开<i class="el-icon-arrow-up" /></template>
          <template v-else>更多<i class="el-icon-arrow-down" /> </template>
        </el-button>
      </ul>

      <ul class="sg-operate-btns">
        <slot name="operateBtns"></slot>
      </ul>
    </ul>
  </div>
</template>
<script>
import sgCollapseBtn from "@/vue/components/admin/sgCollapseBtn";
export default {
  name: "sgSearch_v2",
  components: {
    sgCollapseBtn,
  },
  data() {
    return {
      expandSearch: false,
      showCollapseBtn: false,
    };
  },
  props: [
    "value", //是否显示
    "disabled", //是否禁用
    "collapse",
    "data",
    "showCollapseButton", //显示折叠按钮
  ],
  computed: {},
  watch: {
    collapse: {
      handler(newValue, oldValue) {
        this.expandSearch = !newValue;
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
    expandSearch: {
      handler(newValue, oldValue) {
        this.$emit(`update:collapse`, !newValue);
      },
      deep: true, //深度监听
      // immediate: true, //立即执行
    },
    showCollapseButton: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.getShowCollapseBtn();
        });
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {},
  mounted() {},
  methods: {
    getShowCollapseBtn(d) {
      if (this.showCollapseButton === "" || this.showCollapseButton) {
        this.showCollapseBtn = true;
      } else if (this.showCollapseButton === false) {
        this.showCollapseBtn = false;
      } else {
        let len_search_list = this.$el.querySelectorAll(`.search-list>li`).length;
        console.log(len_search_list);
        this.showCollapseBtn = len_search_list > 3;
      }
    },
  },
  destroyed() {
    this.removeEvents();
  },
};
</script>
<style lang="scss" scoped>
.sgSearch_v2 {
  position: relative;
  $defaultHeight: 40px; //默认高度
  $expandHeight: max-content; //展开高度

  $colCount: 4; //每行数量a
  $itemGap: 10px; //每一项间距
  $itemLabelGap: 5px; //每一项标签间距
  width: 100%;
  height: $defaultHeight;
  flex-grow: 1;
  box-sizing: border-box;
  .sgCollapseBtn {
    display: none;
  }
  & > .search-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    & > * {
      flex-shrink: 0;
    }

    & > li {
      width: calc((100% - #{$itemGap} * (#{$colCount} - 1)) / #{$colCount});
      flex-wrap: nowrap;
      align-items: baseline;
      box-sizing: border-box;
      margin-right: $itemGap;
      margin-bottom: $itemGap;
      display: none;

      // 折叠的状态只显示前两个搜索项和搜索、重置按钮
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        display: flex;
      }

      label {
        flex-shrink: 0;
        margin-right: $itemLabelGap;
        text-align: right;
      }

      &:nth-child(#{$colCount}n) {
        margin-right: 0;
      }
    }

    .sg-search-btns {
      display: flex;
      flex-wrap: nowrap;
      align-items: baseline;
      margin-bottom: 10px;

      & > * {
        margin-left: $itemGap;

        &:first-child {
          margin-left: 0;
        }
      }
    }
    .sg-operate-btns {
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      flex-wrap: nowrap;
      margin-left: auto;
      margin-bottom: 10px;

      & > * {
        margin-left: $itemGap;
      }
    }
  }

  &[expand] {
    z-index: 999;
    & > .search-list {
      background-color: white;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      & > li,
      .sg-operate-btns {
        display: flex;
      }
    }
  }
}
</style>

应用同【sgSearch】自定义组件：常用搜索栏筛选框组件（包括表格高度变化兼容）。_搜索框高度变化 表格-CSDN博客文章浏览阅读423次，点赞7次，收藏7次。【代码】【sgSearch】自定义组件：常用搜索栏筛选框组件（包括表格高度变化兼容）。_搜索框高度变化 表格https://blog.csdn.net/qq_37860634/article/details/136124062