对话框 / Dialog Star
Dialog 窗口
普通窗口
会自毁的窗口
带按钮的窗口
通过我们提供buttons
参数. 通过这个参数, 可以很方便地添加脚注中的按钮
还可以通过设定footer
的值, 来构建自定义脚注, 自行添加按钮
这里可以给Dialog
中任意的DOM
元素添加data-action
属性。在用户点击了一个带有data-action
的元素时,Dialog
会根据data-action
所指定的动作来释放事件。比如上边例子里,我们给脚注中的按钮添加了close
的动作标识。Dialog
中有一个默认的动作处理动作close
。所有带有 close
动作标识的元素,被点击之后,Dialog
都会自动关闭哟。
注意:
footer
与buttons
的优先级. 如果,footer
与buttons
同时存在, 那么footer
会覆盖buttons
.
是不是觉得自己拼按钮
很麻烦呢? 来, 我们内置一些常用的带按钮的窗口~
内置的窗口们
内置的窗口们的特性
对于警告窗口和确认窗口,它们属于用户必须响应的交互,而且这种响应一定有固定的结果。因此,我们把它们的返回结果进行了
Promise
封装。也就是说,Dialog.alert()
和Dialog.confirm()
会返回promise
. 即这两个操作是异步的, 会返回预期结果. 用户只能在我们限定的选项中做出一个选择. 当promise
被resolved
或rejected
, 会带有按钮的标识part
.都是没有关闭按钮的. 原因是关闭按钮在这里是多余的. 关闭按钮在
alert
中表达的确认
, 与确认
按钮一致; 在confirm
中表达的意图是取消
, 与取消
按钮一致. 因此, 关闭按钮是重复的, 不展现这个按钮. 这也与window.alert()
和window.confirm()
的交互相一致.都是会自毁的. 这与window.alert()和window.confirm()是一致的.
Dialog.alert()
产生的窗口带有样式类.skin-alert-dialog
, 也可以添加其他的skin
来丰富样式效果.Dialog.confirm()
产生的窗口带有样式类.skin-confirm-dialog
, 也可以添加其他的skin
来丰富样式效果.点击
mask
不会关闭窗口, 原因与2一致.