实现思路实现组件的布局。
绑定监听事件和销毁监听事件
高度判断和图标的显示与隐藏
实现组件的布局外层盒子（限制高度）、折叠的图标或者文字（用来显示和隐藏多余的行）、插槽（挖个坑给搜索行占位）。
事件绑定与事件销毁需要绑定一个resize事件。resize事件是在窗口大小发生变化时就会触发。resize事件触发我们就要重新计算盒子查询项的高度，判断是否需要折叠或者显示。mounted生命周期触发计算组件实例高度。并计算查询项高度。resize事件要在组件销毁前的生命周期中进行销毁。不影响其他组件。
高度判断和图标的显示与隐藏首先图标盒子绑定状态，用来显示和隐藏。 其次外层盒子需要设置一个高度临界点，即多大高度时不折叠，超过了这个高度就折叠。盒子高度需要你计算，比如，你需要4行不折叠，需要算出四行的高度并加上图标的高度。如果大于高度则显示图标、如果小于隐藏图标。
完整代码布局<template> <div class="fold_box"> <div class="fold_box_over" : :class="{'fold_box_over_max': isover}" > <div ref="foldboxmain" class="fold_box_main" > <slot></slot> </div> <div v-show="isoverchange" class="fold_box_over_show" > <div class="fold_box_over_btn" @click="showover" > <el-icon :class="{'fold_box_over_btn_rotate': !isover}" :size="14"> <arrowdown /> </el-icon> </div> </div> </div> </div></template>
css代码<style lang="less" scoped>.fold_box { width: 100%; .fold_box_over { overflow: hidden; position: relative; transition: all 0.4s ease; } .fold_box_over_max { height: 159px !important; } .fold_box_main { width: 100%; } .fold_box_over_show { height: 15px; position: absolute; width: 100%; background-color: #fff; bottom: 0; left: 0; } .fold_box_over_btn { width: 20px; height: 15px; cursor: pointer; text-align: center; line-height: 15px; margin: 0 auto; el-icon svg{ font-weight: bold; transition: all 0.4s ease; } &:hover { color: #00caab; } } .fold_box_over_btn_rotate svg{ transform: rotate(180deg); }}</style>
script<script>import { reactive, torefs, ref,onmounted,onbeforeunmount,getcurrentinstance } from "vue";export default { setup() { const state = reactive({ boxwidth: 0, mainheight: 0, isover: false, isoverchange: false }); const { ctx } = getcurrentinstance() const changesize = () => { let el = ctx.$el state.boxwidth = el.offsetwidth countmainheight() } window.addeventlistener('resize', changesize) const countmainheight = () => { if (ctx.$refs['foldboxmain']) { let el= ctx.$refs['foldboxmain'] state.mainheight = el.offsetheight + 15 if (state.mainheight > 129) { state.isoverchange = true state.isover = true } else { state.isoverchange = false state.isover = false } } } onmounted(() => { changesize() }) onbeforeunmount(()=> { window.removeeventlistener('resize', changesize) }) const showover = () => { state.isover = !state.isover } return { ...torefs(state), changesize, countmainheight, showover }; },};</script>
组件使用<template> <foldbox ref="foldbox"> <div class="item" v-for="(item,index) in boxlist" :key="index">{{item}}</div> </foldbox></template><script>import { reactive, torefs, ref } from "vue";import foldbox from './foldbox.vue'export default { components:{ foldbox }, setup() { const state = reactive({ boxlist: [1,2,3,4,5] }); return { ...torefs(state), }; },};</script><style scoped>.item { height: 30px; margin: 6px; background-color: skyblue;}</style>
以上就是vue3如何实现搜索项超过n行就折叠的详细内容。