vue日記之可展開的消息氣泡

項目小需求之聊天氣泡可展開內容

• 由於某些信息內容太長或者某種緣由必須分行輸出,這就致使了有時候一個氣泡佔據了一整個聊天區域
• 因此我打算實現一個在該氣泡加載的時候判斷其氣泡長度,並在長度過長的狀況下進行可展開的選擇功能
• 下面是實現截圖
  
  

---

難點

1. 動態獲取控件並得到高度
2. 動態定位可展開按鈕
3. 每次獲取信息的時候必須循環遍歷初始化

---

過程

1. 先把循環展現的控件的key綁定爲惟一值(很重要,後面功能實現不了浪費不少時間就是這個bug,搞得我心態爆炸
2. 選擇在哪一個事件進行循環遍歷,這裏我選擇在了時間信息調整上(這個功能我之後可能會寫日記,這是實現效果
3. 給控件綁定個惟一值以後,經過id獲取該控件,而且經過offsetHeight屬性獲取高度,判斷過於200px就進行可展開選擇
4. 寫個可展開的標籤,而且經過上面控件獲得的offsetWidth進行動態定位,而且賦予可展開該標籤的功能
5. 進行用戶區分動態定位,這裏是less樣式

---

收穫

• 一個key值沒綁定還得我一直扒原理一直調試獲取消息過程的代碼,頭髮都要無了,這個小細節特別重要,別像我同樣給key值給個index,這點解決了就很好實現這個需求
• 動態綁定的位置不是那麼完美,這是由於個人總體樣式沒設計好,一個用了浮動,一個沒用,因此我很差浮動定位,到時候有更好的再說吧