vant 实现 对话气泡

vant 也提供了相应的组件来实现对话气泡，可以使用 vant 的 Chat 组件来实现。下面是一个简单的示例代码：

<template>
  <van-chat v-model="messages">
    <template #message="{ message }">
      <van-chat-bubble
        v-if="message.from === 'user'"
        :message="message"
        type="primary"
      />
      <van-chat-bubble
        v-else
        :message="message"
        type="default"
      />
    </template>
  </van-chat>
</template>

<script>
import { Chat, ChatBubble } from 'vant'

export default {
  components: {
    [Chat.name]: Chat,
    [ChatBubble.name]: ChatBubble
  },
  data() {
    return {
      messages: [
        { from: 'user', content: '左侧对话内容' },
        { from: 'system', content: '右侧对话内容' }
      ]
    }
  }
}
</script>

在这个示例中，我们使用了 vant 的 Chat 和 ChatBubble 组件来实现对话气泡。在 Chat 中，我们使用 v-model 来绑定对话的数据源，使用 message 插槽来自定义对话气泡的样式和内容。在 message 插槽中，我们使用了 ChatBubble 组件来实现对话气泡，根据不同的消息来源来设置气泡的样式和位置。

当然，vant 的 Chat 组件还提供了许多其他的功能和配置，比如：支持图片、语音、表情等多种消息类型，支持自定义时间轴等。您可以根据具体需求来选择和配置相应的功能。