Vue中评论列表里的文字实现“查看全文”效果,超过100字的部分自动隐藏,点击“查看全文”之后再显示当前评论全部文字
效果图:解决方法:1.遍历获得的列表数据,给每个评论以及评论的第一个回复,添加一个新属性2.根据这个属性值(true or false),给文字显示两种css(超过100字的以及少于100字的)3.点击"查看全文",遍历列表数据,根据id比对,将对应id的这个新属性的属性值取反代码如下:Html部分:<div class="item-body">&...
·
效果图:
解决方法:
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()
}
更多推荐
已为社区贡献4条内容
所有评论(0)