利用Vue+ElementUi实现评论功能

以下是一个简单的Vue组件示例，使用Element UI实现一个基本的评论列表和提交评论的功能：

<template>
  <div>
    <el-input
      type="textarea"
      v-model="comment"
      placeholder="请输入评论内容"
      :rows="2"
      maxlength="200"
      show-word-limit
    ></el-input>
    <el-button type="primary" @click="addComment">提交评论</el-button>
    <div class="comments">
      <el-card
        v-for="(item, index) in comments"
        :key="index"
        class="box-card"
      >
        <div slot="header" class="clearfix">
          <span>{{ item.user }}</span>
          <el-button type="text" class="button-delete" @click="deleteComment(index)">删除</el-button>
        </div>
        <div class="comment-content">
          {{ item.content }}
        </div>
      </el-card>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      comment: '',
      comments: [
        // 初始评论列表，可以从后端获取
        { user: '用户1', content: '这是评论内容1' },
        { user: '用户2', content: '这是评论内容2' },
      ],
    };
  },
  methods: {
    addComment() {
      if (this.comment.trim() === '') {
        this.$message.error('评论内容不能为空');
        return;
      }
      const newComment = {
        user: '当前用户',
        content: this.comment.trim(),
      };
      this.comments.push(newComment);
      this.comment = '';
      this.$message.success('评论成功');
    },
    deleteComment(index) {
      this.comments.splice(index, 1);
      this.$message.success('删除成功');
    },
  },
};
</script>
 
<style scoped>
.comments {
  margin-top: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.clearfix:hover .button-delete {
  display: block;
}
.button-delete {
  float: right;
  padding: 0;
  display: none;
}
.comment-content {
  margin: 10px 0;
}
</style>

这个组件包括了一个用于输入评论的el-input组件，一个提交评论的el-button，以及一个用于显示评论列表的区域。评论列表使用v-for指令进行渲染，每条评论都可以被删除。这个示例简单易懂，并且包含了基本的用户输入验证和列表操作，适合作为学习如何在Vue中使用Element UI的起点。