当前位置：首页 > VUE

vue实现知乎评论

2026-01-20 22:58:26VUE

Vue 实现知乎评论功能

实现知乎评论功能需要结合 Vue 的数据绑定、组件化和事件处理等特性。以下是一个基本的实现方案：

数据结构设计

评论数据通常采用嵌套结构存储，每个评论包含内容、作者、时间及回复列表：

data() {
  return {
    comments: [
      {
        id: 1,
        author: '用户A',
        content: '主评论内容',
        time: '2023-01-01',
        replies: [
          { id: 2, author: '用户B', content: '回复内容', time: '2023-01-02' }
        ]
      }
    ],
    newComment: '',
    replyTo: null
  }
}

评论列表组件

使用递归组件实现嵌套评论显示：

<template>
  <div class="comment-list">
    <div v-for="comment in comments" :key="comment.id" class="comment">
      <div class="comment-header">
        <span class="author">{{ comment.author }}</span>
        <span class="time">{{ comment.time }}</span>
      </div>
      <div class="content">{{ comment.content }}</div>
      <button @click="startReply(comment)">回复</button>

      <!-- 递归显示子评论 -->
      <comment-list 
        v-if="comment.replies && comment.replies.length"
        :comments="comment.replies"
        @reply="handleReply"
      />
    </div>
  </div>
</template>

评论表单组件

实现评论输入和提交功能：

<template>
  <div class="comment-form">
    <textarea v-model="newComment" placeholder="写下你的评论..."></textarea>
    <button @click="submitComment">提交</button>
  </div>
</template>

<script>
export default {
  props: ['replyTo'],
  data() {
    return {
      newComment: ''
    }
  },
  methods: {
    submitComment() {
      this.$emit('submit', {
        content: this.newComment,
        parentId: this.replyTo ? this.replyTo.id : null
      })
      this.newComment = ''
    }
  }
}
</script>

主组件集成

将评论列表和表单组合：

<template>
  <div class="comment-system">
    <h3>评论</h3>
    <comment-form @submit="addComment" />
    <comment-list 
      :comments="comments" 
      @reply="startReply"
    />
  </div>
</template>

<script>
export default {
  components: {
    CommentList,
    CommentForm
  },
  methods: {
    addComment({ content, parentId }) {
      if (parentId) {
        // 查找父评论并添加回复
        this.findAndAddReply(this.comments, parentId, content)
      } else {
        // 添加新主评论
        this.comments.push({
          id: Date.now(),
          author: '当前用户',
          content,
          time: new Date().toLocaleString(),
          replies: []
        })
      }
    },
    startReply(comment) {
      this.replyTo = comment
    }
  }
}
</script>

样式设计

知乎风格的评论样式参考：

vue实现知乎评论

.comment {
  border-left: 2px solid #f0f2f7;
  padding-left: 10px;
  margin: 10px 0;
}
.comment-header {
  color: #8590a6;
  font-size: 14px;
  margin-bottom: 5px;
}
.comment-header .author {
  color: #444;
  margin-right: 10px;
}
.comment-form textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid #ebebeb;
  padding: 10px;
}