Vue實(shí)現(xiàn)文本展開(kāi)收起功能

更新時(shí)間：2022年04月15日 11:52:10 作者：假裝很6

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)文本展開(kāi)收起功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)文本展開(kāi)收起功能的具體代碼，供大家參考，具體內(nèi)容如下

先說(shuō)說(shuō)需求，以及實(shí)現(xiàn)的需求

1、移動(dòng)端H5，發(fā)表留言后跳轉(zhuǎn)到評(píng)論列表，超過(guò)5行文字，多余的需要隱藏，并且需要有展開(kāi)/收起按鈕

2、未超過(guò)5行的文字，不需要展示展開(kāi)收起/按鈕

下面直接丟出核心代碼

<div :ref="`community_${index}`"?
? ? ? class="community-words"?
? ? ? :class="{'more-line':item.domHeight > 300 && !item.open}"?
? ? ? v-html="contentHtml(item.content)" >
</div>
<span class="toggle-fold"?
? ? ? v-show="item.domHeight > 300"?
? ? ? @click="toggleFoldFn(item,index)">
? ? ? {{ item.open ? '收起' : '展開(kāi)'}}
?</span>

實(shí)現(xiàn)思路：獲取數(shù)據(jù)后先渲染頁(yè)面，然后計(jì)算渲染的dom元素高度，在動(dòng)態(tài)添加class，設(shè)置超過(guò)的樣式，以及顯示展開(kāi)收起按鈕，目前是移動(dòng)端h5，流暢度滿足正常需求！下面說(shuō)說(shuō)具體細(xì)節(jié)：

div里面顯示的是文字內(nèi)容，文字的行高我這邊固定是60px，所以超過(guò)5行的高度就是300px，這里用300判斷，這個(gè)判斷條件，可以根據(jù)實(shí)際情況修改，open字段是展開(kāi)收起使用的，默認(rèn)false，下面看看具體的js代碼

?apiQueryCommentsList(data).then((res) => {
? ?if(res.data && res.data.length){
? ? ?this.communityList = res.data;
? ? ? ?this.$nextTick(() => {
? ? ? ? ? for(let k = 0; k < this.communityList.length; k++){
? ? ? ? ? ? ? ? const domHeight = this.$refs[`community_${k}`][0].offsetHeight;
? ? ? ? ? ? ? ? const open = domHeight < 300 ? true : false;
? ? ? ? ? ? ? ? this.$set(this.communityList[k],'domHeight',domHeight);
? ? ? ? ? ? ? ? this.$set(this.communityList[k],'open',open);
? ? ? ? ? ? ? }
?
? ? ? ? ? ? });
? ? ? ? ? }else{
? ? ? ? ? ? this.communityList = [];
? ? ? ? ? }
? ? ? ? });

獲取數(shù)據(jù)后先渲染，再獲取dom高度，通過(guò)$set給每個(gè)數(shù)據(jù)添加domHeight屬性，以及open屬性，open屬性還會(huì)被用到展開(kāi)收起功能，接下來(lái)看展開(kāi)收起功能

toggleFoldFn(item){
? ? ? ? // ios下點(diǎn)擊展開(kāi)需要記錄滾動(dòng)條位置，點(diǎn)擊收起的時(shí)候回到展開(kāi)的位置
? ? ? ? if(!item.open){
? ? ? ? ? this.scollTop = document.documentElement.scrollTop || document.body.scrollTop;
? ? ? ? }else{
? ? ? ? ? const ua = window.navigator.userAgent.toLocaleLowerCase();
? ? ? ? ? const isIOS = /iphone|ipad|ipod/.test(ua);
? ? ? ? ? if(this.scollTop !== null && isIOS){
? ? ? ? ? ? window.scrollTo(0,this.scollTop);
? ? ? ? ? }
? ? ? ? }
? ? ? ? item.open = !item.open;
? ? ? }

item.open = !item.open; 這句代碼就可以實(shí)現(xiàn)展開(kāi)收起功能，其他的代碼是為了解決ios端，展開(kāi)收起后滾動(dòng)條位置發(fā)生改變做的處理，上述代碼即可完成展開(kāi)收起功能！

替換換行符代碼：

contentHtml(content){
? ?return content.replace(/\n/g, "<br/>");
}

下面貼出css代碼

.community-words {
? ? font-size: 32px;
? ? font-family: PingFang SC;
? ? font-weight: 400;
? ? line-height: 60px;
? ? color: rgba(6, 15, 38, 1);
? ? word-wrap:break-word;
? ? word-break:normal;
}
.more-line {
? ? word-break: break-all;
? ? text-overflow: ellipsis;
? ? display: -webkit-box;
? ? -webkit-box-orient: vertical;
? ? -webkit-line-clamp: 5;
? ? overflow: hidden;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: