dao-dialog 重构计划
Closed this issue · 3 comments
为了保证 dao-style 的 dao-dialog 能够具有足够的可扩展性从而满足花式需求，需要重构 dao-dialog。因此我先写了一份新的 dialog 使用文档，大家看是否有问题，或者是否有哪些场景没有覆盖到？
至于其他各种花式 dialog(multistep, 带 tab ...)，我将会在 demo 站中以示例形式开发，
另: 该设计不会在 DCE 2.0 里使用，而是在新版 3.0 中，但考虑到有其他项目也在使用 dao-dialog， 因此，会尽可能保证副作用最小(涉及到必要的改动，之后将会出方案)
组件参数
dialog
接受的参数
| 参数名 | 类型 | 说明 | 默认值 | 是否必填 |
|---|---|---|---|---|
| visible | Boolean | 控制 dao-dialog 是否显示的参数, 与父组件双向绑定 ( 需要加 sync 修饰符 ) | false | 是 |
| header | Object/Boolean | header 配置对象, 具体内容见 header 对象 (当传入 header slot 时，该配置将不会生效), 当任何时候都不需要 header 时可以传入 false | header | 否 |
| footer | Object | footer 配置对象, 具体内容见 footer 对象 (当传入 footer slot 时，该配置将不会生效)， 当任何时候都不需要 footer 时可以传入 false | footer | 否 |
| size | String/Object | 设置 dialog 的大小。 可选 sm, md, lg, 或者传入 { width: *, height: * } 具体指定 |
{ height: auto; width: auto} | 否 |
| containerClass | String | dialog 的容器类名 | - | 否 |
| closeOnClickOutside | Boolean | 设置点击 dialog 外面( 遮罩层 ) 是否关闭 dialog | true | 否 |
| closeOnPressEscape | Boolean | 设置按键 ESC 时是否关闭 dialog | true | 否 |
| allowResize | Boolean | 设置是否可以拖拽调整 dialog 大小 | false | 否 |
| lockScroll | Boolean | 对话框出现时是否将 body 锁定不滚动 | true | 否 |
header 对象
| 参数名 | 类型 | 说明 | 默认值 | 是否必填 |
|---|---|---|---|---|
| title | String | 对话框 title | - | 否 |
| showClose | Boolean | 是否显示关闭图标(为 true 时 title 向左对齐， 为 false 时 title 居中对齐) | false | 否 |
footer 对象
| 参数名 | 类型 | 说明 | 默认值 | 是否必填 |
|---|---|---|---|---|
| confirmText | String | confrim text | 确认 | 否 |
| cancelText | String | cancel text | 取消 | 否 |
| confirmDisabled | Boolean | 禁用 confirm | false | 否 |
dialog 触发的事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| before-open | Dialog 即将打开时的回调, 内部 DOM 还未渲染 | - |
| opened | Dialog 打开时的回调 ,内部 DOM 已经渲染完成 | - |
| before-close | Dialog 即将关闭时的回调, 内部 DOM 还在(confirm 和 cancel 的下一跳也会触发 close) | - |
| closed | Dialog 关闭时的回调, 内部 DOM 已经被移除(confirm 和 cancel 的下一跳也会触发 close) | - |
| confirm | Dialog 点击 确定 时的触发 | - |
| cancel | Dialog 点击 取消 时的触发 | - |
dialog 的具名 slot
| 名称 | 说明 |
|---|---|
| -- | dialog body 内容 |
| header | dialog header 的内容 |
| footer | dialog footer 的内容 |
TLDR; 我想讨论一下：
- 对于模态对话框来说，它究竟是被关闭 close 了，还是被隐藏 hide 了。
- 对于模态对话框来说，close 和 hide 有区别吗？（站在开发者角度 & 站在用户角度）
closeOnClickOutside -> 设置点击 dialog 外面( 遮罩层 ) 是否隐藏 dialog
closeOnPressEscape -> 设置按键 ESC 时是否隐藏 dialog
我不太确定 “隐藏” 这个词是不是合适。
对于一个模态对话框来说，
模态对话框上一般有两个按钮，一个是默认按钮（比如，“确认”、“打印”、“清空回收站”），另一个是取消按钮。它们应当给用户清晰的选项。当用户点击任何一个按钮后，模态对话框就会关闭。为了提高熟练用户的效率，我们应该允许用户按 Esc 键终止对话框（效果和取消按钮相同）。
Alan Cooper 在 About Face 中用了 dismiss 这个词，没有用 close，也没有用 hide。
我猜测，这是因为模态对话框对用户算是比较明确的。大部分时候，都是下面这样：
要么确认 (然后关闭)，要么不确认 (然后关闭)。
要么执行 (然后关闭)，要么不执行 (然后关闭)。
要么提交 (然后关闭)，要么不提交 (然后关闭)。
要么保存 (然后关闭)，要么不保存 (然后关闭)。
所以，在模态对话框中，我觉得 “隐藏” 这个词有点模糊。有人可能会问，“隐藏对话框”后，对话框到底保存还是不保存表单上已经填了数据呢？
通常，在模态对话框中，取消 = 不确认 / 不执行 / 不提交 / 不保存，然后对话框关闭消失不见。
通常，在模态对话框中，ESC = 取消
并且，如果模态对话框中没有任何表单需要填写，比如一个典型的确认用户操作的 Alert，用户往往点 Enter 回车键 就可以 “确定”。
用户一般比较习惯这样。
但是，在非模态对话框中，情况会模糊一些。
其实，我比较倾向，我们把 modal dialog 模态对话框 和 modeless dialog 非模态对护框 区分来看。
比如 Apple HIG 中，分了三个：
- Document-Modal Dialogs
- App-Modal Dialogs
- Modeless Dialogs
我觉得我们可以先关注 模态对话框。因为模态对话框更明确，也更常见。
非模态对话框的一大特点是：用户可以同时在主视图和非模态对话框的视图中切换。这对用户来说恐怕不是那么容易理解。
举个例子，在模态对话框中，当用户点击了下方的按钮后，对话框就会关闭；但是在非模态对话框中，当用户点击了按钮后，对话框不会立刻关闭。（除非用户主动点击非模态对话框上的关闭控件。）
此外，因为非模态对话框不会随着次要任务的结束而自动关闭，未及时关掉的非模态对话框可能浪费屏幕空间。在 Page 中，用户可以用一个非模态对话框在当前打开的文档里查找内容。如果用户不主动关闭它，哪怕他不想继续查找，这个对话框仍会出现在屏幕上。（当用户打开第二个文档时，Page 会关闭这个非模态对话框。用户可以再次打开它。此时，这个非模态对话框的搜索范围是当前活跃窗口里的内容。）
@jamiefang 感谢总监的严谨，的确在模态对话框中只有打开和关闭两种状态
重构之后的 dialog
- 为了保证现有业务不奔溃，兼容了旧版 dialog 的配置方式
- 去除了 mutilstep dialog，在 demo 站里有推荐写法
在升级 dao-style 时候，请务必检查项目里是否使用了旧版 mutilstep dialog，请及时做迁移工作。