vue+elementUI实现多用户评论与回复功能

<template>
  <div class="comment-wrapper">
    <div class="comment" v-for="(comment, index) in comments" :key="index">
      <div class="comment-content">
        {{ comment.content }}
      </div>
      <div class="replies" v-if="comment.replies">
        <div class="reply" v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
          {{ reply.content }}
        </div>
      </div>
      <el-input
        class="input-reply"
        v-if="currentReplyingIndex === index"
        type="textarea"
        v-model="replyContent"
        :rows="2"
        placeholder="请输入回复内容"
      ></el-input>
      <el-button
        v-if="currentReplyingIndex === index"
        type="text"
        @click="replyComment(index)"
      >回复</el-button>
      <el-button
        v-if="currentReplyingIndex === index"
        type="text"
        @click="cancelReply"
      >取消</el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      comments: [
        {
          content: '这是一条评论',
          replies: [
            { content: '这是对评论的回复' }
          ]
        },
        // ... 可以添加更多评论
      ],
      currentReplyingIndex: null,
      replyContent: ''
    };
  },
  methods: {
    replyComment(index) {
      if (this.replyContent.trim()) {
        if (!this.comments[index].replies) {
          this.$set(this.comments[index], 'replies', []);
        }
        this.comments[index].replies.push({ content: this.replyContent });
        this.replyContent = '';
      }
    },
    cancelReply() {
      this.currentReplyingIndex = null;
      this.replyContent = '';
    }
  }
};
</script>
 
<style scoped>
.comment-wrapper {
  padding: 20px;
}
.comment {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #eee;
}
.comment-content {
  margin-bottom: 10px;
}
.replies {
  padding-left: 20px;
  border-left: 2px solid #eee;
}
.reply {
  margin-bottom: 5px;
}
.input-reply {
  margin-bottom: 10px;
}
</style>

这个简单的Vue组件展示了如何使用Element UI的输入框和按钮组件来实现评论和回复功能。用户可以输入回复内容，并可以选择回复或取消回复。这个例子提供了基础的结构和样式，并且使用了Vue的响应式数据绑定来更新界面。