用uni-ui搭建评论系统,搞定点赞、回复、删除

uni-UI + Vue3.2 搭建评论系统的完整指南

引言

评论系统是任何在线平台的关键组成部分，它允许用户表达自己的想法、观点和反馈。在本文中，我们将介绍如何使用 uni-UI 和 Vue3.2 构建一个功能齐全的评论系统。

uni-UI 评论列表组件

要显示评论列表，我们可以使用 uni-UI 的 <uni-comment-list> 组件。此组件提供了用于显示评论、回复、点赞和删除评论的开箱即用功能。

<uni-comment-list
  :list="commentList"
  @reply="handleReply"
  @like="handleLike"
  @delete="handleDelete"
/>

回复评论

当用户单击评论时，我们需要展示一个回复弹窗。为此，我们可以使用 <uni-dialog> 和 <uni-input> 组件。

<uni-dialog v-model="replyDialogVisible">
  <uni-input placeholder="请输入回复内容" v-model="replyContent" />
  <uni-button type="primary" @click="handleReply">回复</uni-button>
</uni-dialog>

点赞评论

允许用户点赞评论是评论系统中的一个常见功能。我们可以使用 <uni-icon> 组件实现这一点。

<uni-icon
  type="like"
  @click="handleLike"
/>

删除评论

为了提供对评论的完全控制，我们需要允许用户删除自己的评论。这可以通过 <uni-action-sheet> 组件实现。

<uni-action-sheet
  :show="actionSheetVisible"
  :items="actionSheetItems"
  @close="handleClose"
/>

示例代码

以下代码演示了如何将所有这些组件组合在一起，创建功能齐全的评论系统：

<template>
  <uni-comment-list
    :list="commentList"
    @reply="handleReply"
    @like="handleLike"
    @delete="handleDelete"
  />

  <uni-dialog v-model="replyDialogVisible">
    <uni-input placeholder="请输入回复内容" v-model="replyContent" />
    <uni-button type="primary" @click="handleReply">回复</uni-button>
  </uni-dialog>

  <uni-action-sheet
    :show="actionSheetVisible"
    :items="actionSheetItems"
    @close="handleClose"
  />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const commentList = ref([
      {
        id: 1,
        content: '这是第一条评论',
        author: '张三',
        createTime: '2022-01-01 10:00:00',
        likeCount: 10,
        replyList: [
          {
            id: 2,
            content: '这是第一条回复',
            author: '李四',
            createTime: '2022-01-01 10:01:00',
            likeCount: 5
          }
        ]
      },
      {
        id: 3,
        content: '这是第二条评论',
        author: '王五',
        createTime: '2022-01-02 10:00:00',
        likeCount: 20,
        replyList: []
      }
    ])

    const replyDialogVisible = ref(false)
    const replyContent = ref('')

    const actionSheetVisible = ref(false)
    const actionSheetItems = [
      {
        name: '删除评论',
        color: '#FF0000',
        @click="handleDelete"
      }
    ]

    const handleReply = (commentId) => {
      // 回复评论的逻辑
    }

    const handleLike = (commentId) => {
      // 点赞评论的逻辑
    }

    const handleDelete = (commentId) => {
      // 删除评论的逻辑
    }

    const handleClose = () => {
      actionSheetVisible.value = false
    }

    return {
      commentList,
      replyDialogVisible,
      replyContent,
      actionSheetVisible,
      actionSheetItems,
      handleReply,
      handleLike,
      handleDelete,
      handleClose
    }
  }
}
</script>

结论

通过使用 uni-UI 和 Vue3.2，我们可以轻松快速地构建一个功能齐全且可定制的评论系统。本文提供了分步指南和代码示例，可帮助你启动并运行自己的评论系统。

常见问题解答

1. 我可以在哪里找到 uni-UI 文档？
   你可以在 uni-UI 官网 找到 uni-UI 的完整文档。

2. 如何将评论系统集成到我的项目中？
   首先你需要安装 uni-UI 和 Vue3.2。然后，将示例代码复制到你的项目并进行必要的修改。

3. 我可以自定义评论系统的样式吗？
   是的，你可以通过 CSS 或在 <uni-comment-list> 组件上使用 style 属性来自定义评论系统的样式。

4. 如何在评论系统中添加分页？
   你可以使用 uni-UI 的 <uni-pagination> 组件来为评论系统添加分页。

5. 如何处理不当或冒犯性的评论？
   你应该实施一个评论审核系统，以识别和删除不当或冒犯性的评论。