本期內(nèi)容

詳細(xì)講述布局劃分，flex布局，相對(duì)絕對(duì)布局，過(guò)渡效果，組件定義等，一步步實(shí)現(xiàn)下面的結(jié)果圖。左側(cè)藍(lán)色區(qū)域是會(huì)話列表，右側(cè)是消息記錄。藍(lán)色區(qū)域內(nèi)的一個(gè)個(gè)小卡片是聊天會(huì)話組件，在組件內(nèi)定義了相關(guān)的交互，刪除，點(diǎn)擊，鼠標(biāo)懸浮。

1. 點(diǎn)擊左側(cè)的會(huì)話，右側(cè)的內(nèi)容也會(huì)隨之發(fā)生改變。

2. 鼠標(biāo)放在會(huì)話上會(huì)彈出刪除按鈕，點(diǎn)擊可以發(fā)起刪除請(qǐng)求同時(shí)發(fā)送事件從會(huì)話列表中剔除該會(huì)話。

3. 點(diǎn)擊新的聊天可以新增會(huì)話。

4. 點(diǎn)擊右上角的修改按鈕可以修改會(huì)話名稱。

代碼實(shí)現(xiàn)

1. 搭建聊天面板骨架

2. 聊天會(huì)話小卡片

聊天會(huì)話可以封裝成組件，分散首頁(yè)的代碼邏輯。

3. 側(cè)邊會(huì)話列表展示和會(huì)話創(chuàng)建

點(diǎn)擊會(huì)話列表中的會(huì)話小卡片會(huì)切換當(dāng)前激活的會(huì)話。鼠標(biāo)放在會(huì)話小卡片上會(huì)彈出刪除按鈕。點(diǎn)擊新的聊天按鈕之后會(huì)話列表會(huì)新增會(huì)話小卡片。

4. 會(huì)話編輯

未編輯狀態(tài)，點(diǎn)擊右側(cè)按鈕開(kāi)始編輯。

編輯狀態(tài)，可以點(diǎn)擊右側(cè)按鈕取消編輯。按回車也可以鍵確認(rèn)編輯。