HarmonyOS應(yīng)用開發(fā)-popup氣泡指示組件練習(xí)

1、蛟龍騰飛學(xué)習(xí)分享材料HarmonyOS應(yīng)用開發(fā)-popup氣泡指示組件練習(xí)效果展示：說明：該組件從API version 4開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。氣泡指示。在點擊綁定的控件后會彈出相應(yīng)的氣泡提示來引導(dǎo)用戶進行操作。屬性：名稱類型默認值必填描述targetstring-是目標(biāo)元素的id屬性值，不支持動態(tài)切換。placementstringbottom否彈出窗口位置?？蛇x值為：left：位于目標(biāo)元素左邊；right：位于目標(biāo)元素右邊；top：位于目標(biāo)元素上邊；bottom：位于目標(biāo)元素下邊；topLeft：位于目標(biāo)元素左上角；topRight：位于目

2、標(biāo)元素右上角；bottomLeft：位于目標(biāo)元素左下角；bottomRight：位于目標(biāo)元素右下角。keepalive5+booleanfalse否設(shè)置當(dāng)前popup是否需要保留。設(shè)置為true時，點擊屏幕區(qū)域或者頁面切換氣泡不會消失，需調(diào)用氣泡組件的hide方法才可讓氣泡消失；設(shè)置為false時，點擊屏幕區(qū)域或者頁面切換氣泡會自動消失。clickable5+booleantrue否popup是否使用點擊彈窗，當(dāng)設(shè)置為false時，只支持方法調(diào)用顯示。arrowoffset5+0否popup箭頭在彈窗處的偏移，默認居中，正值按照語言方向進行偏移，負值相反。事件：名稱參數(shù)描述visibility

3、change visibility: boolean 當(dāng)氣泡彈出和消失時會觸發(fā)該回調(diào)函數(shù)。方法：名稱參數(shù)描述show5+-彈出氣泡提示。hide5+-取消氣泡提示。說明：popup氣泡彈窗屬性、樣式均不支持動態(tài)更新。popup氣泡彈窗的margin樣式是相對于target元素進行生效的，如popup在target元素下方，此時只生效margin-top樣式，popup在target元素左上方，此時只生效margin-bottom和margin-right樣式。popup的border四邊樣式需一致，若四邊設(shè)置不一致且圓角為零，則按左、上、右、下的順序取第一個被設(shè)置的樣式，否則border不生效

4、。popup的target組件的click事件不生效。代碼示例： Click to show the pop-up Text content of the pop-up Click to show the pop-up/* xxx.css */.container flex-direction: column; align-items: center; padding-top: 200px;.popup mask-color: gray;.text color: white;.button width: 220px; height: 70px; margin-top: 50px;/ xxx.jsimport prompt from mptexport default visibilitychange(e) prompt.showToast( message: visibility change visibility: + e.visibility, duration: 3000, ); , showpopup() this.$