vue element-ul實現(xiàn)展開和收起功能的實例代碼

更新時間：2023年01月16日 15:18:37 作者：吳小花的博客

這篇文章主要介紹了vue element-ul實現(xiàn)展開和收起功能的實例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

實現(xiàn)效果如下：

需求：

由于后臺搜索選項有很多，影響頁面美觀，所以一進來要隱藏一部分搜索項，只保留1行，

點擊【展開搜索】按鈕的時候才顯示全部，點擊【收起搜索】按鈕又收起部分，保留1行。

需求分析：

由于不太好控制行數(shù)，因為不同屏幕尺寸展示的1行的內(nèi)容并不相同（不考慮移動端），所以考慮用顯示高度來控制。

解決思路：

所以這里通過控制搜索區(qū)域的高度來實現(xiàn)展開和收起搜索功能。

頁面一進來是收起搜索狀態(tài)，控制搜索區(qū)域的高度為120px,超出部分隱藏。

點擊展開搜索的時候，調(diào)整搜索區(qū)域的高度為”auto"

定義變量：showAll控制狀態(tài)

代碼解析：

 <el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch">
     {{word}}
     <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
    </el-button>

當showAll為false的時候，即搜索區(qū)域處于收起狀態(tài)，此時將按鈕文字變?yōu)?ldquo;展開搜索”，圖標變?yōu)橄蛳拢╡l-icon-arrow-down)

當showAll為ture的時候，即搜索區(qū)域全部展開了，將按鈕文字變成“收起搜索”，圖標變成向上（el-icon-arrow-up)

data(){
  return{
   showAll:true;//是否展開全部
 
  }
}
computed: {
  word: function() {
   if (this.showAll == false) {
    //對文字進行處理
    return "展開搜索";
   } else {
    return "收起搜索";
   }
  }
 },

mounted()里調(diào)用closeSearch函數(shù)，頁面一進來將this.showAll設為false,即處于收起狀態(tài)。所以data里最初給showAll定義的時候設為true.

給搜索區(qū)域的ID設為“searchBox” ，

當showAll為false的時候，設置搜索區(qū)域高度為120px,否則高度自動。

mounted() {
  /**
   * 收起搜索
   */
  this.$nextTick(function() {
   this.closeSearch();
  });
 },
 methods:{
  closeSearch() {
   this.showAll = !this.showAll;
   var searchBoxHeght = document.getElementById("searchBox");
   if (this.showAll == false) {
    searchBoxHeght.style.height = 60 + "px";
   } else {
    searchBoxHeght.style.height = "auto";
   }
  }
 }

CSS中關鍵的設置不要忘記。

#searchBox {
 overflow: hidden;
}

新方法：

html:

    :style="{
                height: showMoreSearch
                    ? `${searchboxHeight - searchboxOtherHeight}px`
                    : `${searchboxDefaultHeight}px`
            }">

        <el-button
                class="more-arrow"
                type="text"
                title="更多查詢條件"
                @click="toggleSearch(1)">
                {{ searchTitle }}
                <i class="el-icon-arrow-down more-arrow"></i>
            </el-button>

data:

   showMore: false, // 是否下拉顯示更多
            searchTitle: "顯示全部"

methods:

   // 顯示更多（rows為下拉的行數(shù)，根據(jù)下拉行數(shù)計算高度）
        toggleSearch (rows = 1) {
            this.showMoreSearch = !this.showMoreSearch;
            this.searchTitle = this.showMoreSearch ? "收起" : "顯示全部";
            this.searchboxHeight = this.showMoreSearch ? rows * 64 + 200 : 200;
        },

到此這篇關于vue +elementUl實現(xiàn)展開和收起搜索功能的文章就介紹到這了,更多相關vue +elementUl展開和收起內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: