【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 删除及排序

西瓜watermelon
176 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

前言

大家好，在上一次分享中我们实现了沸点评论模块中文本框的禁用启用，表情，图片图标以及发布按钮的显示与隐藏功能，最后实现了发布评论功能。到目前我们已经实现了简单的评论展示及发布评论功能，但依然还有很多细节功能没有实现，比如在官方中：如果是当前用户发布评论，当鼠标浮上去后会显示出个删除按钮，也就是说当前用户可以删除自己的评论。另外在展示的5条评论中默认加载的是最新的评论，当我们点击最热后还会根据热度进行重新加载。本次分享我们就来实现一下这两点内容：

  • 删除自己的评论
  • 按热度重新加载评论数据

删除评论

删除评论功能实现起来也比较简单，主要就是围绕3个核心点开展基本就能实现了：

  • 当前用户只能删除自己的回复
  • 在有权删除的情况下，鼠标悬浮上去后在右下角显示一个红色删除链接
  • 回复删除后重新刷新回复列表 结合以上三点我们来分析一下大概的实现思路。在前面的分享中我们已经将评论展示功能封装成来comment组件，因此我们本次的操作大部分都是在comment.vue中进行。
  • 首先定义一个props：is_current_user用于接收父组件传进来的用户ID（在通过api获取到评论列表到数据中有个user_info对象，我们需要将该对象中的user_id属性作为参数传递给comment.vue的is_current_user属性）
  • 然后再通过profile_id接口获取到当前登录到用户ID并保存到响应式属性current_user中
  • 最后再通过is_current_user和current_user进行对比，如果两个值相同则鼠标悬浮后显示删除按钮
  • 关于鼠标悬浮显示删除按钮这个实现起来比较简单，可以通过样式的hover进行控制，这里就不展开了
  • 另外在删除成功后还需要刷新评论列表，这里稍稍有点复杂，因为删除操作是在子组件comment.vue中操作，而刷新数据需要在父组件中刷新，因此：
    • 在子组件的删除操作中，删除成功后我们需要返回一个自定义事件delComment，来告诉父组件我删除成功了
    • 在父组件调用子组件时绑定自定义事件delComment，并在该事件方法中刷新评论数据 核心代码及效果图如下：
<!--comment.vue-->
<div
    v-if="is_current_user === current_user"
    class="del"
    @click="deleteComment"
    >
    删除
</div>
    
    <!--Fire.vue-->
<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)"
/>


// 添加props
 is_current_user: {
  type: String,
  default: "",
},

api.profileIdGet().then((res) => {
  state.current_user = res.data.profile_id;
});
    
 //删除评论方法
 const deleteComment = () => {
  Dialog.confirm({
    title: "操作提示",
    message: "删除后不可恢复，确定要删除吗？",
  })
    .then(async () => {
      // on confirm
      const res = await api.delete(comment_id);
      ctx.emit("delComment", res);
    })
    .catch(() => {
      // on cancel
    });
};

test.gif 按热度排序

关于按热度排序就更简单了，在之前加载评论数据时我们已经封装好了接口，并预留了几个参数，其中有一个sort参数就是用来按“最新”或“最热”排序的。当sort值为0时按最新排序加载，当sort值为1时则按最热排序加载，sort默认为0也就是默认按“最新”加载。因此这里我们只需要：

  • 定义一个响应式属性sort，用于保存最新或最热排序值
  • 定义一个方法sortComment，接收两个参数
    • sort 通过点击最新或最热传递0 或 1
    • msgId 当前沸点内容的id，用于重新加载评论数据
  • 最后给最新和最热两个链接按钮都绑定sortComment方法，并分别传递0和1作为sort参数值 核心代码及效果图如下：
<div>全部评论（{{ msg.msg_Info.comment_count }}）</div> 
    <div class="title-right">
      <span
        :class="{ active: sort === 0 }"
        @click="sortComment(0, msg.msg_id)"
        >最新</span
      >
      <span>|</span>
      <span
        :class="{ active: sort === 1 }"
        @click="sortComment(1, msg.msg_id)"
        >最热</span
      >
</div>

const sortComment = (sort, msgId) => {
  state.sort = sort;
  showComment(msgId, false, sort);
};

test.gif

总结

今天的分享中我们是现了删除当前用户评论功能和按最新或最热排序功能，整体功能实现起来也不是很复杂，就是理清思路一步步实现即可，上一节中我们实现了对沸点内容对评论功能，那么在官方中除了能对沸点内容回复外，我们还可以对评论进行回复，在下一次分享中我们将主要实现该功能。今天的分享就到这里了，喜欢的小伙伴欢迎点赞评论加关注哦！！

avatar
文章
阅读
粉丝