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

效果图：

解决方法：

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

代码如下： 

Html部分：

{{item.body}}查看全文

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.metathis.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”属性置falseif (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 = trueif (val.limit_replies.length > 0) {val.limit_replies[0].displayAll = true}}})this.getComments()
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！