EDialog 对话框

import EUI 1.0

示例与代码

动态内容与返回结果

QML 代码QML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Item {
    height: 50
    width: 420

EButton {
        text: "Open dialog"

onClicked: dialogs.open(content, {
            "greeting": "Dynamic content"
        }, {
            "title": "Service dialog",
            "onClose": function(value, accepted) {
                sampleFeedback.open(accepted ? JSON.stringify(value) : "Cancelled")
            }
        })
    }
    EDialogService {
        id: dialogs
    }
    Component {
        id: content

Column {
            property var dialogRef
            property string greeting: "Hello"

spacing: 12

EText {
                text: parent.greeting
            }
            EButton {
                text: "Return result"

onClicked: parent.dialogRef.resolve({
                    "saved": true
                })
            }
        }
    }
    EMessage {
        id: sampleFeedback

type: EStyle.Info
        objectName: "sampleFeedback"
    }
}

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

关闭前确认与拖动

QML 代码QML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Item {
    width: Math.min(640, parent.width)
    height: 480

Column {
        width: parent.width - 48
        spacing: 16
        anchors.centerIn: parent

EButton {
            text: qsTr("打开对话框")

onClicked: webNavigationDialog.open()
        }
        EDialog {
            id: webNavigationDialog

draggable: true
            showFooter: false
            destroyOnClose: true
            title: qsTr("关闭前确认")
            beforeClose: function(done) {
                webNavigationDialogConfirmation.complete = done
                webNavigationDialogConfirmation.open()
            }
            contentComponent: webNavigationDialogContent
        }
        Component {
            id: webNavigationDialogContent

EText {
                width: parent.width
                wrapMode: Text.WordWrap
                text: qsTr("内容在关闭后销毁，再次打开时重新创建。")
            }
        }
        EDialog {
            id: webNavigationDialogConfirmation

property var complete: null

title: qsTr("确认关闭")
            text: qsTr("确定关闭当前面板？")

onAccepted: {
                if (complete)
                    complete()
                complete = null
            }
            onRejected: {
                if (complete)
                    complete(true)
                complete = null
            }
        }
    }
}

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

对话框

QML 代码QML

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

属性

属性说明取值与默认值

alignCenterbool

是否采用居中布局或居中文字。

默认值继承 Provider，默认 true

autofocusbool

组件显示时自动聚焦；受控件可用状态及弹层生命周期影响。

默认值true

backgroundColorcolor

背景颜色。

默认值动态绑定

beforeClosevar

关闭前回调；弹窗通过 done(cancel) 完成异步判断。

默认值null

borderColorcolor

边框颜色。

默认值动态绑定

cancelTextstring

取消按钮文字。

默认值随当前语言变化

centerbool

是否采用居中布局或居中文字。

默认值false

closeDelayint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值0

closeIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.XMARK

closeOnClickOutsidebool

点击弹层外部时关闭。

默认值true

closeOnEscapebool

是否允许按 Escape 关闭。

默认值true

closePolicyenum

弹层自动关闭的触发条件，可组合多个条件。

Popup.*（可用 | 组合）
NoAutoClose
CloseOnPressOutside
CloseOnPressOutsideParent
CloseOnReleaseOutside
CloseOnReleaseOutsideParent
CloseOnEscape

默认值动态绑定

confirmStyleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

默认值EStyle.Primary

confirmTextstring

确认按钮文字。

默认值随当前语言变化

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值别名：dialogContent.data

contentComponentComponent

自定义主体内容的 Component 插槽；null 使用默认内容。委托上下文见本页示例。

默认值null

destroyOnClosebool

关闭后销毁通过 Component 加载的内容。

默认值false

dialogRadiusreal

圆角半径，单位为像素。

默认值8

draggablebool

是否支持拖动；具体拖动对象由当前组件决定。

默认值继承 Provider，默认 false

enabledbool

是否允许交互；false 时控件禁用。

默认值true

enterDurationint

动画或显示持续时间，单位为毫秒；组件的绑定表达式给出实际用途。

默认值220

exitDurationint

动画或显示持续时间，单位为毫秒；组件的绑定表达式给出实际用途。

默认值180

focusbool

是否请求弹层焦点。

默认值autofocus

fullscreenbool

是否使用全屏显示或全窗口覆盖。

默认值false

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值fullscreen && Overlay.overlay ? Overlay.overlay.height : implicitHeight

modalOverlayColorcolor

模态或非模态遮罩颜色。

默认值动态绑定

modalPenetrablebool

是否允许输入穿透非模态遮罩。

默认值false

modelessOverlayColorcolor

模态或非模态遮罩颜色。

默认值动态绑定

openDelayint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值0

overflowbool

是否允许对话框拖动超出窗口范围。

默认值继承 Provider，默认 false

showCancelButtonbool

是否显示取消按钮。

默认值true

showClosebool

是否显示关闭或删除按钮。

默认值true

showConfirmButtonbool

是否显示确认按钮。

默认值true

showFooterbool

是否显示底部操作区。

默认值true

showHeaderbool

是否显示头部区域。

默认值true

textstring

显示的文字内容。

默认值""

textColorcolor

文字颜色。

默认值动态绑定

titlestring

标题文字。

默认值""

titleColorcolor

标题颜色。

默认值动态绑定

topreal

对话框顶部位置，单位为像素；非垂直居中时生效。

默认值0

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值动态绑定

windowMarginreal

对话框与窗口边缘的最小间距，单位为像素。

默认值16

loadedContentalias只读

通过 Component 创建的实际内容对象。

默认值别名：contentLoader.item

maximumDialogWidthreal只读

扣除窗口边距后的对话框最大宽度。

默认值由运行时计算

信号

签名作用

closeRejected()

关闭请求被 beforeClose 拒绝时触发。

openAutoFocused()

弹窗打开并完成自动聚焦时触发。

closeAutoFocused()

弹窗关闭并完成焦点恢复时触发。

方法

签名作用

close()

关闭组件的面板或弹窗。

open()

打开组件的面板或弹窗。

resetPosition()

将对话框恢复到初始位置。

requestClose()

请求关闭弹窗，并执行 beforeClose 检查。

EDialog 对话框 ​

示例与代码 ​

动态内容与返回结果 ​

关闭前确认与拖动 ​

对话框 ​

属性 ​

信号 ​

方法 ​

EDialog 对话框

示例与代码

动态内容与返回结果

关闭前确认与拖动

对话框

属性

信号

方法