第一周、2.Dialog组件

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方法来显示和关闭弹窗。

    

        

            这是第一个dialog
            
        
    
    

        

            这是第二个dialog
            
        
    
    
    

/* 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.'
        })
    },
}