本期内容

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

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

(资料图片仅供参考)

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

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

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

代码实现

1. 搭建聊天面板骨架

2. 聊天会话小卡片

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

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

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

4. 会话编辑

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

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

关键词：