您现在的位置是: 互联网 > > 正文

第九期 Vue3/ElementUI Plus 实现聊天面板

时间:2023-06-27 22:17:20 来源:哔哩哔哩 发布者:DN032

本期内容

详细讲述布局划分,flex布局,相对绝对布局,过渡效果,组件定义等,一步步实现下面的结果图。左侧蓝色区域是会话列表,右侧是消息记录。蓝色区域内的一个个小卡片是聊天会话组件,在组件内定义了相关的交互,删除,点击,鼠标悬浮。


【资料图】

点击左侧的会话,右侧的内容也会随之发生改变。

鼠标放在会话上会弹出删除按钮,点击可以发起删除请求同时发送事件从会话列表中剔除该会话。

点击新的聊天可以新增会话。

点击右上角的修改按钮可以修改会话名称。

代码实现

1. 搭建聊天面板骨架

2. 聊天会话小卡片

聊天会话可以封装成组件,分散首页的代码逻辑。

3. 侧边会话列表展示和会话创建

点击会话列表中的会话小卡片会切换当前激活的会话。鼠标放在会话小卡片上会弹出删除按钮。点击新的聊天按钮之后会话列表会新增会话小卡片。

4. 会话编辑

未编辑状态,点击右侧按钮开始编辑。

编辑状态,可以点击右侧按钮取消编辑。按回车也可以键确认编辑。

标签:

抢先读

相关文章

热文推荐

精彩放送

关于我们| 联系我们| 投稿合作| 法律声明| 广告投放

版权所有© 2011-2023  产业研究网  www.coalstudy.com

所载文章、数据仅供参考.本站不作任何非法律允许范围内服务!

联系我们:39 60 29 14 2 @qq.com

皖ICP备2022009963号-13