HarmonyOS应用开发-popup气泡指示组件练习

鸿蒙时代

发布于 2022-4-2 10:34

浏览

0收藏

效果展示：
HarmonyOS应用开发-popup气泡指示组件练习-鸿蒙开发者社区

说明：
该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。

属性：
HarmonyOS应用开发-popup气泡指示组件练习-鸿蒙开发者社区
事件：

方法：

说明：
1.popup气泡弹窗属性、样式均不支持动态更新。
2.popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。
3.popup的border四边样式需一致，若四边设置不一致且圆角为零，则按左、上、右、下的顺序取第一个被设置的样式，否则border不生效。
4.popup的target组件的click事件不生效。
代码示例：

<!-- xxx.hml -->
<div class="container">
    <text id="text">Click to show the pop-up</text>
    <popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true"
           arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup">
        <text class="text">Text content of the pop-up</text>
    </popup>
    <button class="button" onclick="showpopup">Click to show the pop-up</button>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

/* 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;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

// 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();
    },
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.