对话框ui/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
|
HTMLElement
|
(已覆盖)(只读)获取用于包含子控件和节点的根元素。 |
Control |
⮞
readyState
: ControlState
|
ControlState
|
获取当前控件的渲染状态。 |
Control |
⮞
elem
: HTMLElement
|
HTMLElement
|
关联的元素。 |
Control |
⮞
vNode
: VNode
|
VNode
|
(保护的)获取当前控件关联的虚拟节点。 |
Control |
⮞
sourceVNode
: VNode
|
VNode
|
获取创建该控件使用的源虚拟节点。 |
Control |
⮞
alwaysUpdate
: boolean
|
boolean
|
控件是否使用主动更新模式。 |
Control |
⮞
duration
: number = 200
|
number
|
渐变的持续毫秒数。如果为 0 则不使用渐变。 |
Control |
⮞
class
: string
|
string
|
CSS 类名。 |
Control |
⮞
style
: string | { [key: string]: string | number; }
|
string | object
|
控件样式。 |
Control |
⮞
id
: string
|
string
|
控件序号。 |
Control |
⮞
content
: NodeLike
|
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()():
(保护的)当点击关闭按钮后执行。 返回值类型: |
(保护的)当点击关闭按钮后执行。 |
— | ||||||||
⮞
show(...)(target?:
显示当前对话框。
返回值类型: |
显示当前对话框。 |
— | ||||||||
⮞
close(...)(target?:
关闭当前对话框。
返回值类型: |
关闭当前对话框。 |
— | ||||||||
⮞
render()():
|
(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。 |
Control |
||||||||
⮞
init()():
|
(保护的)(已覆盖)当被子类重写时负责在关联元素后初始化当前控件。 |
Control |
||||||||
⮞
uninit()():
|
(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。 |
Control |
||||||||
⮞
update()():
|
重新渲染当前控件。 |
Control |
||||||||
⮞
layout(changes)(changes:
|
重新布局当前控件。 |
Control |
||||||||
⮞
invalidate()():
|
使当前控件无效并在下一帧重新渲染。 |
Control |
||||||||
⮞
renderTo(parent, ...)(parent:
|
将当前控件渲染到指定的父控件或节点。 |
Control |
||||||||
⮞
find(selector)(selector:
|
在当前控件查找指定的子控件或节点。 |
Control |
||||||||
⮞
query(selector)(selector:
|
在当前控件查找匹配的所有子控件或节点。 |
Control |