您好,登录后才能下订单哦!
这篇文章主要介绍了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>
<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> 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行就折叠”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。