Vue.js 聊天界面组件

应用场景

此聊天界面组件适用于需要在 Web 应用程序中实现实时聊天功能的场景，例如即时通讯应用、客服系统或社交网络。

基本功能

此组件提供以下基本功能：

• 显示接收到的聊天消息
• 发送聊天消息
• 支持文本、图片、表情和文件消息
• 可自定义消息外观和行为

功能实现步骤及关键代码分析

1. 安装依赖项

npm install vue v-calendar echarts echarts-for-vue @wangeditor/editor-for-vue vue3-baidu-map-gl

2. 创建聊天界面组件

<template>
  <div class="chat-page">
    <van-nav-bar
      title="Chat"
      left-arrow
      fixed
      :border="false"
      class="chat-nav-bar"
    />
    <div class="chat-content">
      <van-chat-message :message="messages[0]" />
      <van-chat-message :message="messages[1]" />
      <van-chat-message :message="messages[2]" />
    </div>
    <van-chat-input v-model="message" placeholder="Write a message" />
  </div>
</template>

3. 定义消息数据

const messages = ref([
  {
    type: "text",
    content: "Hello!",
    datetime: "2022-08-08 12:00:00",
    self: false,
  },
  {
    type: "text",
    content: "Hello Doctor",
    datetime: "2022-08-08 12:01:00",
    self: true,
  },
  {
    type: "text",
    content: "Ok!",
    datetime: "2022-08-08 12:02:00",
    self: false,
  },
]);

4. 实现消息发送功能

const message = ref("");

const handleSend = () => {
  if (message.value === "") {
    return;
  }

  const newMessage = {
    type: "text",
    content: message.value,
    datetime: new Date().toISOString(),
    self: true,
  };

  messages.value.push(newMessage);
  message.value = "";
};

5. 集成富文本编辑器

const editorConfig = ref({
  placeholder: '请输入内容...'
});

const editor = shallowRef();

const handleEditorCreated = (editorInstance) => {
  // Attach the editor instance to the ref
  editor.value = editorInstance;
  console.log("editor.value", editor.value, editorInstance)
};

onBeforeUnmount(() => {
  // Destroy the editor instance before the component is unmounted
  editor.value.destroy();
  editor.value = null;
});

总结与展望

开发此聊天界面组件是一个有益的学习过程。它涉及 Vue.js、vant-ui 和其他第三方库的集成，并需要对实时通信和富文本编辑的理解。

未来，此组件可以进一步拓展和优化，例如：

• 添加对视频和语音消息的支持
• 集成表情和文件选择器
• 实现消息已读和送达状态的跟踪