Vue 中如何实现仿知乎的回答评论功能？

Vue是一款非常流行的前端框架，它的灵活性和易用性使得它在web开发中有着广泛的应用。知乎是一个非常流行的问答社区，它拥有庞大的用户群体和丰富的内容。在知乎中，回答下的评论功能是非常重要的。在本文中，我们将探讨如何使用Vue来实现仿知乎的回答评论功能。

1. 功能简介

在知乎中，用户可以在回答下进行评论。评论可以形成一个树状结构，其中每个节点表示一个评论，节点之间有父子关系。用户可以在每个节点下面添加自己的评论，同样会形成树形结构。为了方便用户查看，知乎还会展开和收缩评论。

下面是本文需要实现的功能列表：

1. 用户可以在回答下添加评论；
2. 评论可以形成树形结构；
3. 用户可以在每个节点下面添加评论；
4. 根据层级展示评论；
5. 用户可以展开和收缩评论。

2. 数据结构设计

在实现该功能之前，我们需要先设计数据结构。在知乎中，评论是树形结构，每个节点都有以下属性：

1. id: 节点的唯一标识符；
2. content: 节点的内容；
3. author: 节点的作者；
4. createTime: 节点创建时间；
5. children: 子节点列表。

下面是该数据结构的定义：

interface Comment {
  id: string;
  content: string;
  author: string;
  createTime: number;
  children?: Comment[];
}

对于每个回答，我们需要一个评论列表。因为可能有多个回答，我们需要将这些评论列表放到一个对象中，这样就可以通过回答的id来获取对应的评论列表。下面是该数据结构的定义：

interface CommentData {
  [answerId: string]: Comment[];
}

3. 实现步骤

3.1 显示评论

我们需要首先显示评论列表。为了展示树形结构，我们可以使用递归组件。递归组件是指组件可以在自身模板中调用自身。

在Vue中，可以使用组件的name属性来实现递归。下面是一个简单的组件：

<template>
  <div>
    <div>{{ comment.content }}</div>
    <div v-if="comment.children">
      <comment v-for="c in comment.children" :key="c.id" :comment="c" />
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
};
</script>

该组件会递归地渲染所有的子节点。

3.2 添加评论

在添加评论时，我们需要指定要添加到哪个节点下面。因此，我们需要为每个节点添加一个唯一标识符。在本例中，我们使用UUID来生成唯一标识符。同时，为了方便操作，我们还在每个节点中保存它所属回答的id。

我们可以使用Vuex来管理状态。添加评论的流程如下：

1. 用户输入评论内容，并选择要添加到哪个节点下面；
2. 触发Vuex的Action，向服务器发送请求，在服务器中添加评论记录；
3. 添加成功后，服务器返回新的评论记录；
4. 触发Vuex的Mutation，将新的评论记录添加到状态中。

在组件中，我们可以使用v-model指令来绑定用户输入的评论内容，并使用221f08282418e2996498697df914ce4e元素来选择要添加到哪个节点下面。下面是一个组件的例子：

<template>
  <div>
    <div>
      <textarea v-model="content" />
    </div>
    <div>
      <select v-model="parentId">
        <option value="root">回答</option>
        <option :value="comment.id" v-for="comment in comments" :key="comment.id">
          {{ comment.content }}
        </option>
      </select>
    </div>
    <div>
      <button @click="addComment">添加评论</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  props: {
    answerId: {
      type: String,
      required: true,
    },
    comment: {
      type: Object,
      required: false,
      default: () => null,
    },
  },
  data() {
    return {
      content: "",
      parentId: "root",
      comments: [],
    };
  },
  created() {
    if (this.comment) {
      this.comments = this.comment.children || [];
    } else {
      this.comments = this.$store.state.comments[this.answerId] || [];
    }
  },
  methods: {
    ...mapActions("comments", ["addComment"]),
  },
};
</script>

在这个组件中，我们将用户输入的内容和选择的父节点id双向绑定到组件的data中。同时，该组件还接收一个comment属性，如果该属性存在，则表示该组件要添加到一个已有的评论下面；否则，该组件是要添加到回答下面的新评论。

在该组件的created方法中，我们检索该组件要添加的评论的子节点列表。如果当前组件是要添加到一个已有的评论下面，则使用它的子节点列表；否则，我们从Vuex的状态中获取所在回答的评论列表。

在组件的addComment方法中，我们可以调用Vuex的Action，来向服务器添加新的评论记录：

async addComment() {
  const { content, parentId } = this;
  const answerId = this.answerId;
  await this.addComment({ answerId, parentId, content });
  this.$emit("added");
}

在Action处理完毕后，我们触发added事件，以通知父组件刷新界面。

3.3 展开和收缩评论

展开和收缩评论是一项比较复杂的功能。需要记录每个节点的展开状态，并能够快速的获取所在节点和它的子节点。我们可以在Vuex的状态中记录每个节点的展开状态。

展开和收缩评论的流程如下：

1. 用户点击展开或收缩；
2. 触发Vuex的Mutation，更新对应节点的展开状态；
3. 组件根据展开状态，递归地渲染子节点。

这个功能我们需要编写一个递归组件。组件会根据节点是否展开来决定是否渲染子节点。在该组件中，我们还需要编写一个展开和收缩按钮。下面是该组件的代码：

<template>
  <div>
    <div>
      <div>{{ comment.content }}</div>
      <div>
        <button @click="toggle"> {{ open ? "收起" : "展开" }} </button>
      </div>
    </div>
    <div v-if="open && comment.children">
      <comment v-for="subComment in comment.children" :key="subComment.id" :comment="subComment" />
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
  computed: {
    open() {
      return this.$store.state.expanded[this.comment.id];
    },
  },
  methods: {
    toggle() {
      this.$store.commit("toggle", this.comment.id);
    },
  },
};
</script>

在该组件中，我们使用Vuex中的expanded状态来记录每个节点是否展开。在组件的computed中，我们使用该状态来判断当前节点是否展开。在组件的methods中，我们使用Vuex的Mutation来更新展开状态。

展开状态的处理逻辑很简单，我们只需要在Mutation中将对应的节点的展开状态取反即可：

toggle(state, id) {
  state.expanded[id] = !state.expanded[id];
},

4. 总结

本文介绍了如何使用Vue实现仿知乎的回答评论功能，包括评论的树形结构、添加评论、展开和收缩评论。Vue的组件、状态管理和递归组件等特性，为实现该功能提供了非常便利的支持。如果您想尝试实现仿知乎的回答评论功能，本文提供了非常好的参考。

以上是Vue 中如何实现仿知乎的回答评论功能？的详细内容。更多信息请关注PHP中文网其他相关文章！