Teal TealUI

对话框ui/dialog

基本用法
不可关闭
事件
样式
API
Dialog 类

基本用法

<button id="btn">弹窗</button>
<script>
    import { VNode, from } from "ui/control";
    import Dialog from "ui/dialog";

    btn.onclick = () => {
        from(<Dialog title="标题">内容</Dialog>).show(btn);
    };
</script>

不可关闭

<button id="btn_hideClose">弹窗</button>
<script>
    import { VNode, from } from "ui/control";
    import Dialog from "ui/dialog";

    btn_hideClose.onclick = () => {
        const dialog = from(<Dialog title="标题" hideClose><button onClick={() => { dialog.close(); } }>手动关闭</button></Dialog>);
        dialog.show(btn_hideClose);
    };
</script>

事件

<button id="btn_event">弹窗</button>
<script>
    import { VNode, from } from "ui/control";
    import Dialog from "ui/dialog";

    btn_event.onclick = () => {
        const dialog = from(<Dialog title="标题" onBeforeClose={() => confirm("确定是否关闭?")}>内容</Dialog>);
        dialog.show(btn_event);
    };
</script>

样式

顶部
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
<div class="x-dialog" style="display: block; position: relative;">
    <section class="x-panel">
        <header class="x-panel-header">
            <button class="x-close x-icon" title="关闭" aria-label="关闭"></button>
            <h5>顶部</h5>
        </header>
        <div class="x-panel-body">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </section>
</div>

如果需要一个含有确定/取消按钮或者含有一个图标的对话框,请使用消息框

API

Dialog 类

继承自:Control

表示一个对话框。

字段 类型 描述 继承自
header : HTMLElement

头部。

HTMLElement

头部。

title : NodeLike

标题。

NodeLike

标题。

hideClose : boolean

是否可关闭。

boolean

是否可关闭。

animation : ToggleAnimation

切换显示的动画。

ToggleAnimation

切换显示的动画。

target : HTMLElement

切换显示的动画目标。

HTMLElement

切换显示的动画目标。

onShow : (sender: Dialog) => void

显示对话框事件。

function

显示对话框事件。

onBeforeClose : (sender: Dialog) => boolean | void

即将关闭对话框事件。

function

即将关闭对话框事件。

onClose : (sender: Dialog) => void

关闭对话框事件。

function

关闭对话框事件。

draggable : boolean

是否可拖动。

boolean

是否可拖动。

body : HTMLElement

(已覆盖)(只读)获取用于包含子控件和节点的根元素。

继承自

Control

HTMLElement

(已覆盖)(只读)获取用于包含子控件和节点的根元素。

Control
readyState : ControlState

获取当前控件的渲染状态。

继承自

Control

ControlState

获取当前控件的渲染状态。

Control
elem : HTMLElement

关联的元素。

继承自

Control

HTMLElement

关联的元素。

Control
vNode : VNode

(保护的)获取当前控件关联的虚拟节点。

继承自

Control

VNode

(保护的)获取当前控件关联的虚拟节点。

Control
sourceVNode : VNode

获取创建该控件使用的源虚拟节点。

继承自

Control

VNode

获取创建该控件使用的源虚拟节点。

Control
alwaysUpdate : boolean

控件是否使用主动更新模式。

继承自

Control

boolean

控件是否使用主动更新模式。

Control
duration : number = 200

渐变的持续毫秒数。如果为 0 则不使用渐变。

继承自

Control

number

渐变的持续毫秒数。如果为 0 则不使用渐变。

Control
class : string

CSS 类名。

继承自

Control

string

CSS 类名。

Control
hidden : boolean

是否隐藏。

继承自

Control

boolean

是否隐藏。

Control
style : string | { [key: string]: string | number; }

控件样式。

继承自

Control

string | object

控件样式。

Control
id : string

控件序号。

继承自

Control

string

控件序号。

Control
content : NodeLike

控件内容。

继承自

Control

NodeLike

控件内容。

Control
onSelectStart : (e: Event, sender: Dialog) => void function

选择开始事件。

Control
onClick : (e: MouseEvent, sender: Dialog) => void function

点击事件。

Control
onAuxClick : (e: MouseEvent, sender: Dialog) => void function

中键点击事件。

Control
onDblClick : (e: MouseEvent, sender: Dialog) => void function

双击事件。

Control
onContextMenu : (e: PointerEvent, sender: Dialog) => void function

右键菜单事件。

Control
onMouseDown : (e: MouseEvent, sender: Dialog) => void function

鼠标按下事件。

Control
onMouseUp : (e: MouseEvent, sender: Dialog) => void function

鼠标按上事件。

Control
onMouseOver : (e: MouseEvent, sender: Dialog) => void function

鼠标移入事件。

Control
onMouseOut : (e: MouseEvent, sender: Dialog) => void function

鼠标移开事件。

Control
onMouseEnter : (e: MouseEvent, sender: Dialog) => void function

鼠标进入事件。

Control
onMouseLeave : (e: MouseEvent, sender: Dialog) => void function

鼠标离开事件。

Control
onMouseMove : (e: MouseEvent, sender: Dialog) => void function

鼠标移动事件。

Control
onWheel : (e: WheelEvent, sender: Dialog) => void function

鼠标滚轮事件。

Control
onScroll : (e: UIEvent, sender: Dialog) => void function

滚动事件。

Control
onTouchStart : (e: TouchEvent, sender: Dialog) => void function

触摸开始事件。

Control
onTouchMove : (e: TouchEvent, sender: Dialog) => void function

触摸移动事件。

Control
onTouchEnd : (e: TouchEvent, sender: Dialog) => void function

触摸结束事件。

Control
onTouchCancel : (e: TouchEvent, sender: Dialog) => void function

触摸撤销事件。

Control
onPointerEnter : (e: PointerEvent, sender: Dialog) => void function

指针进入事件。

Control
onPointerLeave : (e: PointerEvent, sender: Dialog) => void function

指针离开事件。

Control
onPointerOver : (e: PointerEvent, sender: Dialog) => void function

指针移入事件。

Control
onPointerOut : (e: PointerEvent, sender: Dialog) => void function

指针移开事件。

Control
onPointerDown : (e: PointerEvent, sender: Dialog) => void function

指针按下事件。

Control
onPointerMove : (e: PointerEvent, sender: Dialog) => void function

指针移动事件。

Control
onPointerUp : (e: PointerEvent, sender: Dialog) => void function

指针松开事件。

Control
onPointerCancel : (e: PointerEvent, sender: Dialog) => void function

指针取消事件。

Control
onGotPointerCapture : (e: PointerEvent, sender: Dialog) => void function

指针开始捕获事件。

Control
onLostPointerCapture : (e: PointerEvent, sender: Dialog) => void function

指针停止捕获事件。

Control
方法 描述 继承自
handleCloseClick()():void

(保护的)当点击关闭按钮后执行。

返回值

类型:void

(保护的)当点击关闭按钮后执行。

show(...)(target?:HTMLElement):void

显示当前对话框。

参数 类型 描述 默认值
target HTMLElement

返回值

类型:void

显示当前对话框。

close(...)(target?:HTMLElement):void

关闭当前对话框。

参数 类型 描述 默认值
target HTMLElement

返回值

类型:void

关闭当前对话框。

render()():VNode

(保护的)

返回值

类型:VNode

继承自

Control

(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。

Control
init()():void

(保护的)

返回值

类型:void

继承自

Control

(保护的)(已覆盖)当被子类重写时负责在关联元素后初始化当前控件。

Control
uninit()():void

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

返回值

类型:void

继承自

Control

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

Control
update()():void

重新渲染当前控件。

返回值

类型:void

继承自

Control

重新渲染当前控件。

Control
layout(changes)(changes:Changes):void

重新布局当前控件。

参数 类型 描述 默认值
changes* Changes

返回值

类型:void

继承自

Control

重新布局当前控件。

Control
invalidate()():void

使当前控件无效并在下一帧重新渲染。

返回值

类型:void

继承自

Control

使当前控件无效并在下一帧重新渲染。

Control
renderTo(parent, ...)(parent:Control | Node, refChild?:Control | Node):void

将当前控件渲染到指定的父控件或节点。

参数 类型 描述 默认值
parent* Control | Node
refChild Control | Node

返回值

类型:void

继承自

Control

将当前控件渲染到指定的父控件或节点。

Control
find(selector)(selector:string):Control | HTMLElement

在当前控件查找指定的子控件或节点。

参数 类型 描述 默认值
selector* string

返回值

类型:Control | HTMLElement

返回子控件或节点。如果找不到则返回 null。

继承自

Control

在当前控件查找指定的子控件或节点。

Control
query(selector)(selector:string):(Control | HTMLElement)[]

在当前控件查找匹配的所有子控件或节点。

参数 类型 描述 默认值
selector* string

返回值

类型:(Control | HTMLElement)[]

返回子控件或节点列表。

继承自

Control

在当前控件查找匹配的所有子控件或节点。

Control