鸿蒙应用开发点击按钮触发事件练习

点击按钮触发事件，弹出提示框进行选择。

Hml代码：

<!-- xxx.hml -->
<div class="doc-page">
    <div class="btn-div">
        <button type="capsule" value="点击弹出" class="btn" onclick="showDialog"></button>
    </div>
    <dialog id="simpledialog" class="dialog-main" oncancel="cancelDialog">
        <div class="dialog-div">
            <div class="inner-txt">
                <text class="txt">是否同意协议</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>

Css样式代码：

/* xxx.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;
}
.txt {
    color: #000000;
    font-weight: bold;
    font-size: 39px;
}
.dialog-main {
    width: 600px;
}
.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;
}

Js代码：

// xxx.js
import prompt from '@system.prompt';

export default {
    showDialog(e) {
        this.$element('simpledialog').show()
    },
    cancelDialog(e) {
        prompt.showToast({
            message: '取消对话框'
        })
    },
    cancelSchedule(e) {
        this.$element('simpledialog').close()
        prompt.showToast({
            message: '不同意'
        })
    },
    setSchedule(e) {
        this.$element('simpledialog').close()
        prompt.showToast({
            message: '已同意'
        })
    }
}

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/Js_popup