用vue和antd写一个好看的评论区

首先，需要安装vue和antd，可以通过以下命令进行安装：

npm install ant-design-vue

然后在Vue项目中引入antd的样式：

import 'ant-design-vue/dist/antd.css';

接着，在Vue组件中使用antd的评论组件：

<template>
  <div>
    <a-comment-list :dataSource="comments">
      <template #actions="{comment}">
        <a :href="'#' + comment.id">Reply to</a>
      </template>
    </a-comment-list>
    <a-comment v-if="showEditor" :avatar="avatar"
      :content="editorContent"
      :datetime="moment().fromNow()"
      @submit="handleSubmit"
    >
      <template #actions>
        <a @click="showEditor = false">Cancel</a>
      </template>
    </a-comment>
    <a @click="showEditor = true">Add Comment</a>
  </div>
</template>

<script>
import { Comment, CommentList } from "ant-design-vue";

export default {
  components: {
    Comment,
    CommentList,
  },
  data() {
    return {
      showEditor: false,
      editorContent: "",
      comments: [
        {
          author: "John",
          avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
          content: "Nice post!",
          datetime: "2022-07-01",
          id: "1",
        },
        {
          author: "Jane",
          avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
          content: "Thanks for sharing!",
          datetime: "2022-07-02",
          id: "2",
        },
      ],
      avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
    };
  },
  methods: {
    handleSubmit() {
      const id = this.comments.length + 1;
      this.comments.push({
        author: "You",
        avatar: this.avatar,
        content: this.editorContent,
        datetime: new Date().toString(),
        id: id.toString(),
      });
      this.editorContent = "";
      this.showEditor = false;
    },
  },
};
</script>

在上面的代码中，我们使用了antd的`Comment`和`CommentList`组件，以及一个“Add Comment”按钮。当用户点击“Add Comment”按钮时，会显示一个评论编辑器，用户可以在其中输入评论内容，点击提交按钮后，会在评论列表中添加一条新的评论。

最终的效果如下图所示：