vue3-模拟聊天室发消息

1. 在模板部分：

   • 包含一个输入框用于用户输入消息，通过 v-model 指令与 message 数据进行双向绑定，用户可以在此输入聊天消息。
   • 一个发送按钮，点击时触发 sendMessage 函数，用于发送消息。
   • 一个无序列表用于展示聊天消息，通过 v-for 指令循环渲染 chats 数组中的每一个聊天对象。
   • 在每个列表项中，显示头像图片（通过 getAvatarUrl 函数获取图片路径）、聊天消息文本以及对应的发送时间（通过 formatTime 函数格式化时间戳后显示）。

2. 在脚本部分：

   • 导入 ref 函数用于创建响应式数据。
   • avatars 数组模拟了可供选择的头像图片文件名列表。
   • chats 数组用于存储所有的聊天消息，初始为空。
   • message 用于存储用户输入的消息文本。
   • sendMessage 函数在用户点击发送按钮时被调用：
     • 当输入框有内容时，创建一个包含消息文本、唯一标识 id、随机头像以及当前时间戳的新聊天对象。
     • 将新的聊天对象添加到 chats 数组中。
     • 清空输入框，以便用户继续输入下一条消息。
   • getAvatarUrl 函数：
     • 根据传入的头像文件名生成对应的 URL 路径，假设头像存储在 public/images 文件夹下，返回正确的路径格式以便在页面中正确加载头像图片。
   • formatTime 函数：
     • 接受一个时间戳作为参数。
     • 根据时间戳创建一个 Date 对象，然后分别获取年份、月份、日期、小时和分钟等信息。
     • 对月份、日期、小时和分钟进行格式化，确保它们都是两位数的格式（如果小于 10，前面补 0）。
     • 将年份、月份、日期、小时和分钟组合成一个格式化后的时间字符串，格式为 年-月-日 时:分，并返回该字符串用于在页面中显示发送时间。