第一周、2.Dialog组件

最新推荐文章于 2025-03-07 16:30:53 发布

花开富贵

最新推荐文章于 2025-03-07 16:30:53 发布

阅读量709

点赞数

文章标签： Dialog组件自定义弹窗事件监听用户交互前端开发

本文链接：https://blog.csdn.net/cxy2002cxy/article/details/124651090

版权

这篇博客介绍了如何在页面中创建和使用Dialog组件来展示重要信息或操作。通过在hml文件中添加Dialog和Button组件，并设置相应事件监听，可以实现弹窗的显示和关闭。当用户点击非Dialog区域时，会触发cancel事件关闭弹窗。同时，通过js文件中的方法调用来控制Dialog的显示和隐藏，以及处理用户确认操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Dialog是用于创建自定义弹窗的容器组件，通常用来展示用户当前需要或用户必须关注的信息或操作。

创建Dialog组件：

在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。

设置弹窗响应：

开发者点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。

<!-- xxx.hml -->
<div class="doc-page">
    <dialog class="dialogClass1" id="dialogId1">
        <div class="content1">
            <text>这是第一个dialog</text>
            <button value="confirm" onclick="confirmClick1"></button>
        </div>
    </dialog>
    <dialog class="dialogClass2" id="dialogId2">
        <div class="content2">
            <text>这是第二个dialog</text>
            <button value="confirm" onclick="confirmClick2"></button>
        </div>
    </dialog>
    <button value="点击这里" onclick="openDialog1"></button>
    <button value="然后点击这里" onclick="openDialog2"></button>
</div>

/* xxx.js */
import prompt from '@system.prompt';
export default {
    //Touch to open the dialog box.
    openDialog1(){
        this.$element('dialogId1').show()
    },
    openDialog2(){
        this.$element('dialogId2').show()
    },
    confirmClick1(e) {
        this.$element('dialogId1').close()
        prompt.showToast({
            message: 'Confirmed.'
        })
    },
    confirmClick2(e) {
        this.$element('dialogId2').close()
        prompt.showToast({
            message: 'Confirmed.'
        })
    },
}