Vue 实现头条评论

Vue 实现头条评论功能

要实现类似头条的评论功能，可以按照以下步骤进行开发：

1. 创建评论组件结构

使用 Vue 单文件组件结构，包含评论列表、评论输入框和回复功能。基本模板如下：

<template>
  <div class="comment-container">
    <div class="comment-input">
      <textarea v-model="newComment" placeholder="写下你的评论..."></textarea>
      <button @click="submitComment">发布</button>
    </div>

    <div class="comment-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <img :src="comment.avatar" class="avatar">
          <span class="username">{{ comment.username }}</span>
        </div>
        <div class="comment-content">{{ comment.content }}</div>
        <div class="comment-footer">
          <span class="time">{{ comment.time }}</span>
          <span class="reply-btn" @click="showReply(comment.id)">回复</span>
        </div>

        <!-- 回复框 -->
        <div v-if="activeReply === comment.id" class="reply-box">
          <textarea v-model="replyContent" placeholder="写下你的回复..."></textarea>
          <button @click="submitReply(comment.id)">回复</button>
        </div>

        <!-- 子评论 -->
        <div v-if="comment.replies && comment.replies.length" class="replies">
          <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
            <!-- 回复项结构类似主评论 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

2. 实现数据逻辑

在 Vue 组件中管理评论数据状态和交互逻辑：

<script>
export default {
  data() {
    return {
      comments: [], // 从API获取或本地模拟数据
      newComment: '',
      replyContent: '',
      activeReply: null
    }
  },
  methods: {
    submitComment() {
      if (!this.newComment.trim()) return

      const newComment = {
        id: Date.now(),
        username: '当前用户',
        avatar: '用户头像URL',
        content: this.newComment,
        time: '刚刚',
        replies: []
      }

      this.comments.unshift(newComment)
      this.newComment = ''
    },

    showReply(commentId) {
      this.activeReply = commentId
    },

    submitReply(commentId) {
      if (!this.replyContent.trim()) return

      const comment = this.comments.find(c => c.id === commentId)
      if (comment) {
        const newReply = {
          id: Date.now(),
          username: '当前用户',
          avatar: '用户头像URL',
          content: this.replyContent,
          time: '刚刚'
        }

        comment.replies.push(newReply)
        this.replyContent = ''
        this.activeReply = null
      }
    }
  }
}
</script>

3. 添加样式

为评论组件添加基本样式：

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

.comment-input {
  margin-bottom: 20px;
}

.comment-input textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.comment-input button {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #1e80ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.comment-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-footer {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

.reply-btn {
  margin-left: 15px;
  cursor: pointer;
}

.reply-box {
  margin-top: 10px;
  padding-left: 20px;
}

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

4. 高级功能实现

对于更接近头条的评论体验，可以考虑添加以下功能：

• 分页加载：当评论数量多时实现滚动加载更多
• 点赞功能：为每条评论添加点赞按钮和计数
• 富文本支持：允许插入表情或@用户
• 敏感词过滤：在提交前过滤不当内容
• 用户认证：确保只有登录用户才能评论

5. 与后端API集成

实际项目中需要与后端API交互：

async fetchComments() {
  try {
    const response = await axios.get('/api/comments')
    this.comments = response.data
  } catch (error) {
    console.error('获取评论失败', error)
  }
}

async submitComment() {
  try {
    const response = await axios.post('/api/comments', {
      content: this.newComment
    })
    this.comments.unshift(response.data)
    this.newComment = ''
  } catch (error) {
    console.error('提交评论失败', error)
  }
}

通过以上步骤，可以实现一个基本的头条风格评论功能，根据实际需求可以进一步扩展和完善。