1.根據(jù)文本自適應(yīng)寬度
2.標(biāo)簽超出兩行顯示兩行
3.展開(kāi)收起箭頭按鈕永遠(yuǎn)置于末位，若只有兩行則箭頭按鈕隱藏，若超出兩行，將箭頭符號(hào)置于第二行的末位
效果如下圖所示：

<!-- 分組 --> <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, //點(diǎn)擊分組標(biāo)簽chatMore: false,maskShow: false, //遮罩是否hasMoreBtn: false, // 是否超出兩行showMore: false, // 是否groupList: [], //話術(shù)分組標(biāo)簽列表groupListBack: [], //備份groupIdList: [], //備份};},

獲取父容器所有的子節(jié)點(diǎn),然后進(jìn)行遍歷操作，根據(jù)子節(jié)點(diǎn)的offsetLeft屬性進(jìn)行判斷，因?yàn)樽钭筮叺哪莻€(gè)節(jié)點(diǎn)的offsetLeft永遠(yuǎn)是0，所以可以判斷出現(xiàn)了幾行，超過(guò)2行截?cái)鄶?shù)據(jù)。

// 計(jì)算有幾行標(biāo)簽 classNa 父容器樣式名稱(chēng)toggleHistoryData () {let idx = 0;let count = 0;let iIndex0 = 0;this.$nextTick(() => {let ulChid = document.querySelector(".chat-group-con").childNodes; //獲取父容器所有子節(jié)點(diǎn)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;}}});// 超過(guò)2行截?cái)鄶?shù)據(jù)if (idx > 0) {this.groupList = [...new Set(this.groupListBack)].slice(0, idx);}});},

文本自適應(yīng)寬度，給內(nèi)容padding，和固定高度；這里的分組標(biāo)簽是后臺(tái)傳來(lái)的，有最大字?jǐn)?shù)限制，所以就沒(méi)有寫(xiě)只顯示一行。

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

當(dāng)顯示全部數(shù)據(jù)時(shí)顯示遮罩層，點(diǎn)擊標(biāo)簽置于首位，所以上面多了些判斷，若不需要去掉即可。
參考：類(lèi)似京東淘寶歷史搜索自適應(yīng)長(zhǎng)度搜索項(xiàng)超兩行折疊功能實(shí)現(xiàn)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。