1.根據文本自適應寬度
2.標簽超出兩行顯示兩行
3.展開收起箭頭按鈕永遠置于末位，若只有兩行則箭頭按鈕隱藏，若超出兩行，將箭頭符號置于第二行的末位
效果如下圖所示：

<!-- 分組 --> <div class="header" ref="lableGroup" :class="chatMore ? 'chat-group-mask' : 'chat-group'"><div :class="chatMore ? 'chat-group-con-mask' : 'chat-group-con'"><div class="lable-group" :class="isactive == item.id ? 'lable-group-active' : 'lable-group'" v-for="(item, index) in groupList" :key="item.id" @click="getLable(item, index)" :ref="item.id"><span class="lable">{{ item.groupName }}</span></div><span class="last-lable" @click="showPopup" v-if="hasMoreBtn && showMore"><i class="iconfont iconfangxiangjiantou" :class="chatMore ? 'directionTop' : ''"></i></span></div> </div> <!-- 遮罩 --> <div class="mask" v-if="maskShow" @click="showPopup"></div> data () {return {isactive: 0, //點擊分組標簽chatMore: false,maskShow: false, //遮罩是否hasMoreBtn: false, // 是否超出兩行showMore: false, // 是否groupList: [], //話術分組標簽列表groupListBack: [], //備份groupIdList: [], //備份};},

獲取父容器所有的子節點,然后進行遍歷操作，根據子節點的offsetLeft屬性進行判斷，因為最左邊的那個節點的offsetLeft永遠是0，所以可以判斷出現了幾行，超過2行截斷數據。

// 計算有幾行標簽 classNa 父容器樣式名稱toggleHistoryData () {let idx = 0;let count = 0;let iIndex0 = 0;this.$nextTick(() => {let ulChid = document.querySelector(".chat-group-con").childNodes; //獲取父容器所有子節點console.log("ulChid", ulChid);ulChid.forEach((i, index) => {if (index === 0) {iIndex0 = i.offsetLeft;}if (i.offsetLeft === iIndex0) {count++;if (count === 3) {idx = index - 1;this.hasMoreBtn = true;this.showMore = true;}}});// 超過2行截斷數據if (idx > 0) {this.groupList = [...new Set(this.groupListBack)].slice(0, idx);}});},

文本自適應寬度，給內容padding，和固定高度；這里的分組標簽是后臺傳來的，有最大字數限制，所以就沒有寫只顯示一行。

.lable-group {height: 28px;line-height: 28px;border-radius: 4px;border: 1px solid #dfdfdf;margin-right: 10px;margin-bottom: 11px;background: #ffffff;overflow: hidden;.lable {padding: 0 8px;font-size: 14px;color: #131313;overflow: hidden;cursor: pointer;} }

當顯示全部數據時顯示遮罩層，點擊標簽置于首位，所以上面多了些判斷，若不需要去掉即可。
參考：類似京東淘寶歷史搜索自適應長度搜索項超兩行折疊功能實現

總結

以上是生活随笔為你收集整理的vue仿移动端京东搜索历史自适应长度超两行折叠功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。