本期內(nèi)容

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

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

(資料圖片僅供參考)

鼠標(biāo)放在會話上會彈出刪除按鈕，點擊可以發(fā)起刪除請求同時發(fā)送事件從會話列表中剔除該會話。

點擊新的聊天可以新增會話。

點擊右上角的修改按鈕可以修改會話名稱。

代碼實現(xiàn)

1. 搭建聊天面板骨架

2. 聊天會話小卡片

聊天會話可以封裝成組件，分散首頁的代碼邏輯。

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

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

4. 會話編輯

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

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

關(guān)鍵詞：