Vue实现文本展开收起功能

<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 ? '收起' : '展开'}}
 </span>

 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 = [];
          }
        });

toggleFoldFn(item){
        // ios下点击展开需要记录滚动条位置，点击收起的时候回到展开的位置
        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;
      }

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

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