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