功能介绍:
适用于搜索条件过多的业务场景，可展开、折叠、展示折叠的搜索模块数量、自适应页面宽度展示合适的数量；
效果图：
展开
折叠
动图
组件代码
<template><div class="search-layout-box" ref="layoutBox"><slot></slot><div class="search-layout-opera"><slot name="opera"></slot><a v-if="toggleText" class="expand retract" @click="toggle"><span>{{ expand ? `收起` : `展开(${hideNum})`}}</span><svg v-if="expand" xmlns="http://www.w3.org/2000/svg" class="retract" viewBox="0 0 1024 1024"><path fill="currentColor" d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0"></path></svg><svg v-else data-v-d2e47025="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg></a></div></div>
</template><script setup>
/*这个组件会默认根据当前父容器宽度进行自适应父组件元素宽度 展示多少个>1600px 6>1200px <=1600px 5>960px <=1200px 4>800px <=960px 3
*/
import { ref, reactive, onMounted, onBeforeUnmount, watch, computed, nextTick, useSlots } from "vue";const props = defineProps({// 是否展开（默认折叠）expandDefault: {type: Boolean,default: false}
});
const slot = useSlots().default()
const expand = ref(props.expandDefault)
const layoutBox = ref();
const hideNum = ref(0) // 隐藏的搜索条件数量
const chunk = ref(1)
const styles = reactive({maxWidth: "",
})const boundaryMap = [{chunk: 3,range: [800, 960]},{chunk: 4,range: [960, 1200]},{chunk: 5,range: [1200, 1600]},{chunk: 6,range: [1600, Infinity]},
]// 展开/收起 切换按钮时候的文字展示计算
const toggleText = computed(() => {let res = falseif (slot[0].children.length <= chunk.value) {res = false} else if (!expand.value && !hideNum.value) {res = false} else if (!expand.value && hideNum.value) {res = true} else {res = true}return res
})const changeStyleHandler = () => {hideNum.value = 0const children = Array.from(layoutBox.value.children)children.forEach((item, index) => {item.style.maxWidth = styles.maxWidthif (index >= chunk.value - 1 && index !== children.length - 1 && !expand.value) {hideNum.value++item.style.display = "none"} else {item.style.display = ""}})
}const toggle = () => {expand.value = !expand.valuechangeStyleHandler()
}// 监测这个元素尺寸发生变化
const resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {const { width } = entry.contentRectconst { chunk: itemChunk } = boundaryMap.find(item => item.range[0] <= width && item.range[1] > width) || boundaryMap[0]chunk.value = itemChunk// 保留4位小数，最后一位向下取整styles.maxWidth = `${100 / chunk.value}%`changeStyleHandler()}
});watch(() => props.expandDefault, val => {expand.value = valnextTick(() => {changeStyleHandler()})
}, { deep: true, immediate: true })onMounted(() => {resizeObserver.observe(layoutBox.value);
});onBeforeUnmount(() => {layoutBox.value && resizeObserver && resizeObserver.unobserve(layoutBox.value);
});
</script><style scoped lang="scss">.search-layout-box {width: 100%;display: flex;flex-flow: row wrap;min-width: 700px;& > :deep(*) {padding-inline: 12px;width: 100%;box-sizing: border-box;margin-bottom: 12px;}.search-layout-opera {justify-content: flex-end;margin-left: auto;gap: 10px;display: flex;white-space: nowrap;.expand, .retract {display: flex;align-items: center;gap: 2px;font-size: 12px;&:hover {color: #69b1ff;transition: color .3s;}cursor: pointer;svg {width: 14px;position: relative;top: 1px;}}}
}</style>
使用
<template><SearchLayout>// 这里面的Layout组件就是form表单的布局，我为了兼容更多，所以单独写了个组件，之前的博客写过<Layout v-for="item in items" :key="item" :label="item.label"><el-input v-model="item.value" placeholder="Please input" /></Layout><template #opera><div><el-button size="middel">搜索</el-button><el-button size="middel" type="primary">重置</el-button></div></template></SearchLayout>
</template><script setup>
import { ref } from "vue";
import SearchLayout from "./components/test2.vue";
import Layout from "./components/Layout.vue";const items = ref([{ label: "姓名", value: "张三" },{ label: "年龄", value: "18" },{ label: "性别", value: "男" },{ label: "地址", value: "北京市海淀区" },{ label: "电话", value: "13800138000" },{ label: "邮箱", value: "zhangsan@example.com" },{ label: "备注", value: "无" },{ label: "姓名", value: "张三" },{ label: "年龄", value: "18" },{ label: "性别", value: "男" },{ label: "地址", value: "北京市海淀区" },{ label: "电话", value: "13800138000" },{ label: "邮箱", value: "zhangsan@example.com" },{ label: "备注", value: "无" },{ label: "姓名", value: "张三" },{ label: "年龄", value: "18" },{ label: "性别", value: "男" },{ label: "地址", value: "北京市海淀区" },{ label: "电话", value: "13800138000" },{ label: "邮箱", value: "zhangsan@example.com" },{ label: "备注", value: "无" },
]);
</script>