这篇文章主要介绍了vue3怎么实现搜索项超过n行就折叠的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3怎么实现搜索项超过n行就折叠文章都会有所收获，下面我们一起来看看吧。
实现思路
实现组件的布局。
绑定监听事件和销毁监听事件
高度判断和图标的显示与隐藏
实现组件的布局
外层盒子（限制高度）、折叠的图标或者文字（用来显示和隐藏多余的行）、插槽（挖个坑给搜索行占位）。
事件绑定与事件销毁
需要绑定一个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行就折叠”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3怎么实现搜索项超过n行就折叠”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
