之前的帖子已經(jīng)詳細說了如何實現(xiàn)彈窗，但是還有一種氣泡確認框也是案例中經(jīng)常會使用到的，今天在這里做一下補充。氣泡確認框是目標(biāo)對象的操作需要用戶進一步的確認時，在目標(biāo)對象附近彈出浮層提示，詢問用戶。和之前彈窗帖子中?confirm?彈窗的全屏居中模態(tài)對話框相比，交互形式更輕量。

1.組件結(jié)構(gòu)

Demo中循環(huán)創(chuàng)建的列一共有三個組成部分，圖片組件，刪除按鈕組件和一個絕對定位容器。

與彈窗采用橫幅組件不同，氣泡確認框是用絕對定位容器來實現(xiàn)的。這是由于橫幅的布局屬性只能選擇在案例中的大致位置，雖然也可以通過水平偏移和垂直偏移進行微調(diào)，但很明顯在需要滿足“目標(biāo)對象附近彈出”這個特性要求下，橫幅并不合適。

這里再提及一下絕對定位容器的特點，絕對定位容器內(nèi)組件的位置只與它在絕對定位容器下的的坐標(biāo)有關(guān)（絕對定位容器的左上角是(0,0)），所以我們可以不受行列的束縛，把行1拖到我們覺得合適的地方。當(dāng)然，本文講的是氣泡確認框，所以我們就把行1放在按鈕Delete旁邊好了。（這里給絕對定位容器設(shè)置一個大小和背景顏色方便觀察。黑色的小塊就是絕對定位容器）

2.邏輯結(jié)構(gòu)

氣泡確認框在邏輯結(jié)構(gòu)上與彈窗是基本一樣的，例如demo中，點擊Delete按鈕，氣泡確認框顯示。點擊cancel按鈕則氣泡確認框重新隱藏，操作取消。點擊氣泡確認框中的Delete按鈕則從二維數(shù)組中刪除當(dāng)前組件對應(yīng)的那一行數(shù)據(jù)。注意demo中是使用了循環(huán)創(chuàng)建，其數(shù)據(jù)來源就是二維數(shù)組，二維數(shù)組有多少行，循環(huán)創(chuàng)建就會創(chuàng)建多少個for容器下的行1，而當(dāng)二維數(shù)組中的一行數(shù)據(jù)被刪除，for容器下對應(yīng)的那個行1也就會消失，自然也就包括行1下面的所有子組件，因此沒有寫讓氣泡確認框重新隱藏的動作，如果是其它類型的操作是要記得寫上的。

3.氣泡框的小尖角

為了讓這個氣泡確認框更像一個氣泡，我這里做了一個小改進，給氣泡確認框加上了一個小尖角。這里使用了分割線組件，用行，列，絕對定位容器或者圖片也都可以，不過之前的帖子也有提及，分割線占用的資源會少很多。

在絕對定位容器下添加好分割線組件后先將分割線的寬高設(shè)置好，使之變成一個小正方形，并設(shè)置顏色與氣泡確認框一致。然后給分割線組件添加一個自定義的CSS樣式，這個的作用是讓分割線旋轉(zhuǎn)45°。最后調(diào)整分割線的XY坐標(biāo)就可以的到最終的效果啦。

總結(jié)

彈窗的樣式實在是多種多樣，不可能有教程去詳細的涵蓋每一種，所以對我們來說最重要的就是活學(xué)活用。畢竟再怎么繁復(fù)的案例也必然有其核心的案例邏輯，我們要做的其實就是圍繞這個邏輯把一個個組件和事件添加進去，而這個過程中自然也要求我們能對各種組件進行靈活的使用，在這方面希望大家能夠相互學(xué)習(xí)共同進步。