Vue实现文本展开收起功能

本文实例为大家分享了Vue实现文本展开收起功能的具体代码，供大家参考，具体内容如下

先说说需求，以及实现的需求

1、移动端H5，发表留言后跳转到评论列表，超过5行文字，多余的需要隐藏，并且需要有展开/收起按钮

2、未超过5行的文字，不需要展示展开收起/按钮

下面直接丢出核心代码

<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>

实现思路：获取数据后先渲染页面，然后计算渲染的dom元素高度，在动态添加class，设置超过的样式，以及显示展开收起按钮，目前是移动端h5，流畅度满足正常需求！下面说说具体细节：

div里面显示的是文字内容，文字的行高我这边固定是60px，所以超过5行的高度就是300px，这里用300判断，这个判断条件，可以根据实际情况修改，open字段是展开收起使用的，默认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 = [];
          }
        });

获取数据后先渲染，再获取dom高度，通过$set给每个数据添加domHeight属性，以及open属性，open属性还会被用到展开收起功能，接下来看展开收起功能

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

item.open = !item.open; 这句代码就可以实现展开收起功能，其他的代码是为了解决ios端，展开收起后滚动条位置发生改变做的处理，上述代码即可完成展开收起功能！

替换换行符代码：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。