当前位置：首页 > VUE

vue评论组件实现

2026-03-09 01:23:32VUE

Vue 评论组件实现

实现一个评论组件需要包含用户输入、评论列表展示、回复功能等核心模块。以下是基于 Vue 3 的实现方案：

数据结构设计

评论数据通常以嵌套结构存储，示例格式如下：

vue评论组件实现

const comments = ref([
  {
    id: 1,
    author: '用户A',
    content: '主评论内容',
    timestamp: '2023-01-01',
    replies: [
      {
        id: 3,
        author: '用户B',
        content: '回复内容',
        timestamp: '2023-01-02'
      }
    ]
  }
])

组件模板结构

<template>
  <div class="comment-section">
    <div class="comment-form">
      <textarea v-model="newComment" placeholder="输入评论..."></textarea>
      <button @click="addComment">提交</button>
    </div>

    <div class="comment-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <span class="author">{{ comment.author }}</span>
          <span class="timestamp">{{ comment.timestamp }}</span>
        </div>
        <div class="comment-content">{{ comment.content }}</div>

        <button @click="showReplyForm(comment.id)">回复</button>

        <div v-if="activeReplyId === comment.id" class="reply-form">
          <textarea v-model="replyContent" placeholder="输入回复..."></textarea>
          <button @click="addReply(comment)">提交回复</button>
        </div>

        <div class="replies" v-if="comment.replies?.length">
          <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
            <!-- 回复内容展示 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

核心逻辑实现

<script setup>
import { ref } from 'vue'

const comments = ref([])
const newComment = ref('')
const replyContent = ref('')
const activeReplyId = ref(null)

const addComment = () => {
  if (!newComment.value.trim()) return

  comments.value.push({
    id: Date.now(),
    author: '当前用户',
    content: newComment.value,
    timestamp: new Date().toLocaleDateString(),
    replies: []
  })

  newComment.value = ''
}

const showReplyForm = (commentId) => {
  activeReplyId.value = activeReplyId.value === commentId ? null : commentId
}

const addReply = (parentComment) => {
  if (!replyContent.value.trim()) return

  parentComment.replies.push({
    id: Date.now(),
    author: '当前用户',
    content: replyContent.value,
    timestamp: new Date().toLocaleDateString()
  })

  replyContent.value = ''
  activeReplyId.value = null
}
</script>

样式设计

<style scoped>
.comment-section {
  max-width: 600px;
  margin: 0 auto;
}

.comment-form textarea {
  width: 100%;
  min-height: 80px;
  margin-bottom: 10px;
}

.comment-item {
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.reply-form {
  margin-top: 10px;
}

.reply-item {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #ddd;
}
</style>