一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。
前言
大家好，昨天分享中我们实现了沸点热评的展示，但关于热评中查看更多回复功能还没做，关于热评展示这一块虽然功能实现了但从效果上看还远远比不上官方的，感觉最近的几次分享有些许的仓促，因为最近白天时间工作比较忙，晚上又有其他事情所以留给分享的只有那么一丢丢时间，没有充足的时间去分析和细化，等后面时间充足再回过头来优化一些细节上的功能吧。今天我们继续分享沸点详情页中的全部评论展示功能。
全部评论
如下图所示，沸点详情页中的全部评论放在热评的下面。第一行是“全部评论”大标题和当前总评论数，右边是“最新”和“最热”两个排序标签，也就是说全部评论可以按最新或最热进行排序展示，紧接着下面就是具体的评论或者回复内容了。哎，看一下这个全部评论是不是似曾相识的感觉？没错，其实在这之前我们分享过的沸点评论展示一文中已经实现过全部评论功能了并且布局设计也是一模一样的。唯一不同的是在之前的分享中全部评论仅仅展示最新或最热的5条评论，然后通过点击查看更多评论跳转到沸点详情页面，而这里的全部评论展示的评论更多一些，并且当点击查看更多时会在下面直接追加上去在同一页面中展示类似于分页功能。
通过这么一顿分析发现我们今天要分享的内容工作量貌似并不大，通过一通Ctrl C V 就能轻松实现了，并且不管是沸点内容，评论内容还是回复内容基本结构都是一样的，因此还可以把我们之前封装好的comment.vue组件充分利用起来。既然如此也就话不多说了，直接进入到代码搬运阶段。
具体的实现步骤这里就不详述感兴趣的小伙伴可以参考下沸点评论展示这篇文章，下面就直接上代码和效果图了
<div class="comment-list-comment">
<div class="comment-title">
<div>全部评论（{{ pin.msg_Info.comment_count }}）</div>
<div class="title-right">
<span
:class="{ active: sort === 0 }"
@click="sortComment(0, pin.msg_id)"
>最新</span
>
<span>|</span>
<span
:class="{ active: sort === 1 }"
@click="sortComment(1, pin.msg_id)"
>最热</span
>
</div>
</div>
<div
class="comment-content"
v-for="rep in replyList"
:key="rep.comment_id"
>
<comment
:avatar_large="rep.user_info.avatar_large"
:user_name="rep.user_info.user_name"
:job_title="rep.user_info.job_title"
:company="rep.user_info.company"
:ctime="rep.comment_info.ctime.toString()"
:origin_content="rep.comment_info.comment_content"
:sub_content="rep.comment_info.sub_content"
:comment_id="rep.comment_id"
:pic_list="rep.comment_info.comment_pics"
:is_author="rep.is_author"
:is_current_user="rep.user_info.user_id"
@delComment="deleteComment(msg.msg_id)"
/>
<div class="comment-content-opt">
<div
class="digg"
:class="{ active: rep.user_interact.is_digg }"
@click="digg(rep.comment_id, rep.user_interact.is_digg)"
>
<van-icon name="good-job-o" />{{
rep.comment_info.digg_count === 0
? "点赞"
: rep.comment_info.digg_count
}}
</div>
<div
class="comment"
@click="
replyHandle(rep.comment_id, current_comment === rep.comment_id)
"
:style="{
color:
rep.comment_info.reply_count === 0 &&
current_comment === rep.comment_id
? '#007fff'
: '',
}"
>
<van-icon name="chat-o" />{{
rep.comment_info.reply_count === 0
? current_comment === rep.comment_id
? "取消回复"
: "回复"
: rep.comment_info.reply_count
}}
</div>
</div>
<reply
:itemId="rep.comment_id"
@published="publishComment"
:isShow="current_comment === rep.comment_id"
:msg_id="pin.msg_id"
/>
<div
class="reply-reply"
v-for="rrp in rep.reply_infos"
:key="rrp.reply_id"
>
</div>
</div>
</div>
const showComment = (msgId, isShow, comment_id) => {
state.curMsgId = !isShow ? msgId : "";
api.commentList("0", msgId, 4, 5, comment_id).then((res) => {
res.data.forEach((item) => {
item.comment_info.sub_content =
item.comment_info.comment_content.substring(0, 80);
item.comment_info.comment_content.length >= 80
? (item.comment_info.sub_content += "...")
: null;
item.comment_info.show_content = item.comment_info.sub_content;
});
state.replyList = res.data;
// console.log(state.replyList);
});
};
const sortComment = (sort, msgId) => {
state.sort = sort;
showComment(msgId, false, sort);
};
总结
哈哈哈，今天的分享水有点多，偷了个懒直接把之前功能抄了一遍。其实说到这里既然我们之前已经实现过了，这里又要重复使用，如果想再做的好一点我们完全可以将这部分内容再进行抽取和封装成单独的组件进行复用的。但正如前面提到由于时间原因还是选择了偷懒。。。。今天的分享就先到这里了~~~
