前言

氣泡組件在實際工作中非常普遍，無論是網頁中還是app中，比如：

我們這里所謂氣泡組件是指列表型氣泡組件，這里就其dom實現，css實現，js實現做一個討論，最后對一些細節點做一些說明，希望對各位有用

小釵最近初學CSS，這里做一個專題，便于自身CSS提升，文章有不少問題與可優化點，請各位指導

組件分類

單由氣泡組件來說，他仍然屬于“彈出層”類組件，也就是說其會具有這些特性：

① 布局為脫離文檔流

② 可以具有mask蒙版，并且可配置點擊蒙版是否關閉的特性

③ 可選的特性有點擊瀏覽器回退關閉組件以及動畫的顯示與隱藏動畫特性

其中比較不同的是：

① 不是居中定位

② 具有一個箭頭標識，并且可以設置再上或者在下

③ 因為具有箭頭，而且這個箭頭是相對于一個元素的，一般意義上我們任務是相對某個按鈕，所以說具有一個triggerEL

所以單從這里論述來說，我們的組件名為BubbleLayer，其應該繼承與一個通用的Layer

但是，就由Layer來說，其最少會具有以下通用特性：

① 創建——create

② 顯示——show

③ 隱藏——hide

④ 摧毀——destroy

而以上特性并不是Layer組件所特有的，而是所有組件所特有，所以在Layer之上還應該存在一個AbstractView的抽象組件

至此繼承關系便出來了，拋開多余的接口不看，簡單來說是這樣的：

組件dom層面實現最簡單實現

單從dom實現來說，其實一個簡單的ul便可以完成任務

當然這里要有相關的css

至此形成的效果是醬紫滴：

代碼如下:

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。