您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
實(shí)現(xiàn)組件的布局。
綁定監(jiān)聽(tīng)事件和銷毀監(jiān)聽(tīng)事件
高度判斷和圖標(biāo)的顯示與隱藏
外層盒子(限制高度)、折疊的圖標(biāo)或者文字(用來(lái)顯示和隱藏多余的行)、插槽(挖個(gè)坑給搜索行占位)。
需要綁定一個(gè)resize事件。resize事件是在窗口大小發(fā)生變化時(shí)就會(huì)觸發(fā)。resize事件觸發(fā)我們就要重新計(jì)算盒子查詢項(xiàng)的高度,判斷是否需要折疊或者顯示。mounted生命周期觸發(fā)計(jì)算組件實(shí)例高度。并計(jì)算查詢項(xiàng)高度。resize事件要在組件銷毀前的生命周期中進(jìn)行銷毀。不影響其他組件。
首先圖標(biāo)盒子綁定狀態(tài),用來(lái)顯示和隱藏。 其次外層盒子需要設(shè)置一個(gè)高度臨界點(diǎn),即多大高度時(shí)不折疊,超過(guò)了這個(gè)高度就折疊。盒子高度需要你計(jì)算,比如,你需要4行不折疊,需要算出四行的高度并加上圖標(biāo)的高度。如果大于高度則顯示圖標(biāo)、如果小于隱藏圖標(biāo)。
<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>
關(guān)于“vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。