Vue中评论列表里的文字实现“查看全文”效果，超过100字的部分自动隐藏，点击“查看全文”之后再显示当前评论全部文字

效果图：

解决方法：

1.遍历获得的列表数据，给每个评论以及评论的第一个回复，添加一个新属性
2.根据这个属性值（true or false），给文字显示两种css（超过100字的以及少于100字的）
3.点击"查看全文"，遍历列表数据，根据id比对，将对应id的这个新属性的属性值取反

代码如下： 

Html部分：

<div class="item-body">
    <div :class="{'item-content-display-all': item.dispalyAll, 'item-content': !item.displayAll}"
         @click="handleCliContent(item.id, '', item.user.name)">{{item.body}}
    </div>
    <div class="click-display-all"
         v-if="!item.displayAll"
         @click="handleClickAll(item)">
       查看全文
    </div>
</div>

Css部分：

// 超过100字的情况
.item-content {
  max-width: 590px;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
// 小于100字，展示全部文字的情况
.item-content-display-all {
  max-width: 590px;
  word-break: break-all;
  margin-bottom: 15px;
}
// 查看全文按钮
.click-display-all {
  color: #6ea4eb;
  margin-bottom: 15px;
}

Js部分：

1.评论列表的处理
 

// 请求到评论数据之后
    getCommentsSuccess (data) {
      this.commentCount = data.meta
      this.currentPageComments = data.comments
      // 在点击“显示全文”的情况下，不重新渲染列表
      if (!this.clickDisplayAll) {
        this.currentPageComments.forEach((val, key) => {
          // 给评论列表中的每一项以及回复添加新属性
          this.$set(val, 'displayAll', true)
          if (val.limit_replies.length > 0) {
            this.$set(val.limit_replies[0], 'displayAll', true)
          }
          // 判定文字内容是否超过100,超过100的话，将“displayAll”属性置false
          if (val.body.replace(/[\u0391-\uFFE5]/g, 'aa').length > 200) {
            val.displayAll = false
          }
          if (val.limit_replies.length > 0 && val.limit_replies[0].body.replace(/[\u0391-\uFFE5]/g, 'aa').length > 200) {
            val.limit_replies[0].displayAll = false
          }
        })
        // 此处"this.commentData"是用于页面上v-for的数组
        this.commentData = this.currentPageComments
      }
      this.clickDisplayAll = false
    }

 

2.点击的处理

// 点击“显示全文”
handleClickDisplayAll (item) {
  // 此变量用于控制是否重新渲染整个列表
  this.clickDisplayAll = true
  // 这个地方直接控制评论以及回复中的“显示全文”按钮，也可分开写两个点击事件
  this.commentData.forEach((val, key) => {
    if (item.id === val.id) {
      val.displayAll = true
      if (val.limit_replies.length > 0) {
        val.limit_replies[0].displayAll = true
      }
    }
  })
  this.getComments()
}