HarmonyOS原子化服务开发实战-dialog自定义弹窗原创

鸿蒙时代

发布于 2021-11-24 15:18

浏览

0收藏

HarmonyOS原子化服务开发实战-dialog自定义弹窗-鸿蒙开发者社区示例代码：

index.hml

<div class="doc-page">
    <div class="btn-div">
        <button type="capsule" value="请点击" class="btn" onclick="showDialog"></button>
    </div>
    <dialog id="simpledialog" dragable="true" class="dialog-main" oncancel="cancelDialog">
        <div class="dialog-div">
            <div class="inner-txt">
                <text class="txt">Simple dialog</text>
            </div>
            <div class="inner-btn">
                <button type="capsule" value="取消" onclick="cancelSchedule" class="btn-txt"></button>
                <button type="capsule" value="确定" onclick="setSchedule" class="btn-txt"></button>
            </div>
        </div>
    </dialog>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

index.css

.doc-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.btn-div {
    width: 100%;
    height: 200px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btn {
    width: 200px;
    height: 60px;
    font-size: 24px;
    background-color: #F2F2F2;
    text-color: #0D81F2;
}
.txt {
    color: #0D81F2;
    font-weight: bold;
    font-size: 39px;
}
.dialog-main {
    width: 500px;
}
.dialog-div {
    flex-direction: column;
    align-items: center;
}
.inner-txt {
    width: 400px;
    height: 160px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.inner-btn {
    width: 400px;
    height: 120px;
    justify-content: space-around;
    align-items: center;
}
.btn-txt {
    background-color: #F2F2F2;
    text-color: #0D81F2;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

index.js

import prompt from '@system.prompt';
export default {
    showDialog(e) {
        this.$element('simpledialog').show()
    },
    cancelDialog(e) {
        prompt.showToast({
            message: 'Dialog cancelled'
        })
    },
    cancelSchedule(e) {
        this.$element('simpledialog').close()
        prompt.showToast({
            message: 'Successfully cancelled'
        })
    },
    setSchedule(e) {
        this.$element('simpledialog').close()
        prompt.showToast({
            message: 'Successfully confirmed'
        })
    },
    doubleclick(e){
        prompt.showToast({
            message: 'doubleclick'
        })
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.