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

效果展示：

說明：
該組件從API version 4開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

氣泡指示。在點擊綁定的控件后會彈出相應(yīng)的氣泡提示來引導(dǎo)用戶進行操作。

屬性：

事件：

方法：

說明：
1.popup氣泡彈窗屬性、樣式均不支持動態(tài)更新。
2.popup氣泡彈窗的margin樣式是相對于target元素進行生效的，如popup在target元素下方，此時只生效margin-top樣式，popup在target元素左上方，此時只生效margin-bottom和margin-right樣式。
3.popup的border四邊樣式需一致，若四邊設(shè)置不一致且圓角為零，則按左、上、右、下的順序取第一個被設(shè)置的樣式，否則border不生效。
4.popup的target組件的click事件不生效。

代碼示例：

/* 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.js
import prompt from '@system.prompt'
export default {
    visibilitychange(e) {
        prompt.showToast({
            message: 'visibility change visibility: ' + e.visibility,
            duration: 3000,
        });
    },
    showpopup() {
        this.$element("popup").show();
    },
    hidepopup() {
        this.$element("popup").hide();
    },
}

審核編輯：符乾江