這篇文章主要介紹了vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊文章都會(huì)有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供萬安網(wǎng)站建設(shè)、萬安做網(wǎng)站、萬安網(wǎng)站設(shè)計(jì)、萬安網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、萬安企業(yè)網(wǎng)站模板建站服務(wù)，十年萬安做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

實(shí)現(xiàn)思路

• 實(shí)現(xiàn)組件的布局。

• 綁定監(jiān)聽事件和銷毀監(jiān)聽事件

• 高度判斷和圖標(biāo)的顯示與隱藏

實(shí)現(xiàn)組件的布局

外層盒子（限制高度）、折疊的圖標(biāo)或者文字（用來顯示和隱藏多余的行）、插槽（挖個(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)的顯示與隱藏

首先圖標(biāo)盒子綁定狀態(tài)，用來顯示和隱藏。 其次外層盒子需要設(shè)置一個(gè)高度臨界點(diǎn)，即多大高度時(shí)不折疊，超過了這個(gè)高度就折疊。盒子高度需要你計(jì)算，比如，你需要4行不折疊，需要算出四行的高度并加上圖標(biāo)的高度。如果大于高度則顯示圖標(biāo)、如果小于隱藏圖標(biāo)。

完整代碼

布局

css代碼

.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);
  }
}

script

組件使用

.item {
  height: 30px;
  margin: 6px;
  background-color: skyblue;
}

關(guān)于“vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue3怎么實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。