vue评论框架实现

实现基础评论组件结构

使用Vue单文件组件构建评论框架的基础结构，包含评论列表和评论表单。模板部分需包含评论容器、评论项和表单提交区域。

<template>
  <div class="comment-container">
    <ul class="comment-list">
      <li v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-content">{{ comment.content }}</div>
        <div class="comment-meta">
          <span class="comment-author">{{ comment.author }}</span>
          <span class="comment-time">{{ comment.time }}</span>
        </div>
      </li>
    </ul>

    <form @submit.prevent="submitComment" class="comment-form">
      <textarea v-model="newComment" placeholder="输入评论内容"></textarea>
      <button type="submit">提交评论</button>
    </form>
  </div>
</template>

处理评论数据逻辑

在Vue组件的script部分定义数据模型和方法。使用数组存储评论数据，实现添加评论功能并处理表单提交。

<script>
export default {
  data() {
    return {
      comments: [
        { id: 1, content: '第一条评论', author: '用户A', time: '2023-05-01' },
        { id: 2, content: '第二条评论', author: '用户B', time: '2023-05-02' }
      ],
      newComment: ''
    }
  },
  methods: {
    submitComment() {
      if (!this.newComment.trim()) return

      const newCommentObj = {
        id: Date.now(),
        content: this.newComment,
        author: '当前用户',
        time: new Date().toLocaleDateString()
      }

      this.comments.push(newCommentObj)
      this.newComment = ''
    }
  }
}
</script>

添加评论样式设计

为评论组件添加基础CSS样式，确保布局美观。使用scoped样式避免影响其他组件。

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

.comment-list {
  list-style: none;
  padding: 0;
}

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

.comment-meta {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
}

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

.comment-form button {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
}
</style>

实现评论回复功能

扩展基础评论功能，添加嵌套回复结构。修改数据模型支持层级关系，添加回复表单。

data() {
  return {
    comments: [
      {
        id: 1,
        content: '主评论',
        author: '用户A',
        time: '2023-05-01',
        replies: [
          { id: 3, content: '回复评论', author: '用户C', time: '2023-05-03' }
        ]
      }
    ],
    newComment: '',
    replyingTo: null
  }
},
methods: {
  startReply(commentId) {
    this.replyingTo = commentId
  },
  submitComment() {
    if (!this.newComment.trim()) return

    if (this.replyingTo) {
      const parentComment = this.findComment(this.comments, this.replyingTo)
      parentComment.replies.push({
        id: Date.now(),
        content: this.newComment,
        author: '当前用户',
        time: new Date().toLocaleDateString()
      })
    } else {
      this.comments.push({
        id: Date.now(),
        content: this.newComment,
        author: '当前用户',
        time: new Date().toLocaleDateString(),
        replies: []
      })
    }

    this.newComment = ''
    this.replyingTo = null
  },
  findComment(comments, id) {
    for (const comment of comments) {
      if (comment.id === id) return comment
      if (comment.replies) {
        const found = this.findComment(comment.replies, id)
        if (found) return found
      }
    }
    return null
  }
}

添加评论分页加载

对于大量评论实现分页加载功能。使用API模拟异步加载，添加加载更多按钮。

data() {
  return {
    comments: [],
    newComment: '',
    currentPage: 1,
    totalPages: 0,
    isLoading: false
  }
},
created() {
  this.loadComments()
},
methods: {
  async loadComments() {
    this.isLoading = true
    try {
      const response = await fetch(`/api/comments?page=${this.currentPage}`)
      const data = await response.json()
      this.comments = [...this.comments, ...data.comments]
      this.totalPages = data.totalPages
      this.currentPage++
    } finally {
      this.isLoading = false
    }
  },
  submitComment() {
    // 提交逻辑保持不变
  }
}

实现评论点赞功能

为评论项添加互动功能，如点赞。更新数据模型包含点赞状态和计数。

data() {
  return {
    comments: [
      {
        id: 1,
        content: '可点赞评论',
        author: '用户A',
        time: '2023-05-01',
        likes: 5,
        liked: false
      }
    ]
  }
},
methods: {
  toggleLike(comment) {
    comment.liked = !comment.liked
    comment.likes += comment.liked ? 1 : -1
  }
}