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()
}