本期內容
詳細講述布局劃分,flex布局,相對絕對布局,過渡效果,組件定義等,一步步實現下面的結果圖。左側藍色區域是會話列表,右側是消息記錄。藍色區域內的一個個小卡片是聊天會話組件,在組件內定義了相關的交互,刪除,點擊,鼠標懸浮。
點擊左側的會話,右側的內容也會隨之發生改變。
(資料圖片僅供參考)
鼠標放在會話上會彈出刪除按鈕,點擊可以發起刪除請求同時發送事件從會話列表中剔除該會話。
點擊新的聊天可以新增會話。
點擊右上角的修改按鈕可以修改會話名稱。
代碼實現
1. 搭建聊天面板骨架
2. 聊天會話小卡片
聊天會話可以封裝成組件,分散首頁的代碼邏輯。
3. 側邊會話列表展示和會話創建
點擊會話列表中的會話小卡片會切換當前激活的會話。鼠標放在會話小卡片上會彈出刪除按鈕。點擊新的聊天按鈕之后會話列表會新增會話小卡片。
4. 會話編輯
未編輯狀態,點擊右側按鈕開始編輯。
編輯狀態,可以點擊右側按鈕取消編輯。按回車也可以鍵確認編輯。
關鍵詞: