【版权声明】本文为 BFUI 组件库的故事，记录了关于 Icon 图标组件的开发设计历程。参考引用或合理转载本文内容时，请标明文章出处和链接。维护开源环境，尊重开发者劳动成果，从你我做起。

关于对话框

在浮层中显示的弹出框，用于引导用户相关操作。

对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作。模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。[1]

功能调研

我们学习了社区中优秀组件库的设计思路，以此来指导 BFUI 中该组件的开发，以下是调研总结：

同类型组件库 主要功能实现 说明
Ant Design 确认对话框、异步关闭、自定义页脚、自定义位置、拖动、自定义宽度、关闭时销毁
Element-plus 自定义头部、内容、嵌套对话框、居中、可拖拽
Arco Design 异步关闭、函数调用、操作提示、自定义宽度、自定义按钮、全屏 动效最好看
TDesign 确认类、反馈提示类、自定义按钮、非模态对话框、可拖拽、自定义挂载元素
Vant 按钮样式、异步关闭
iView 自定义页头页脚和宽度、异步关闭、禁用关闭、自定义位置、全屏、拖拽移动 其中可拖拽对话框可以设置是否能拖出屏幕边缘

初步计划（2023-03-01）

结合其他组件库中该组件常用功能，我们初步拟定实现如下功能的开发：

Dialog Props

属性 Props 说明 类型 默认值
visible 控制对话框是否显示 Boolean false
title 对话框标题 String -
center 是否让对话框内容居中排列 Boolean false
width 自定义宽度 String

Dialog Events

事件 Events 说明 回调参数
onCancel 点击取消时触发
onConfirm 点击确定时触发
onClose 对话框关闭时触发
插槽 Slots 说明
header 自定义页头
footer 自定义页脚
onCancel 取消时的回调

思考讨论

  1. 如何实现对话框动效？怎样的动效更好看？
  2. 如何实现异步关闭？
  3. 如何实现可拖动？以及怎样限制禁止拖出屏幕边缘？
  4. 是像 Element-UI 那样直接让用户自定义页脚好，还是默认预设为确认对话框？
  5. 该对话框组件名称定为 Modal 还是 Dialog 更合适？
  6. 遮罩层是直接写在对话框组件中，还是抽离成单独的组件方便其他组件复用？名字定为 Mask 还是 Overlay 更合适？
  7. 将遮罩层与对话框设计为并列元素，还是将遮罩层包裹到对话框外部？在开发和使用上分别有哪些区别和优势？

开发感悟

  • Button 和 Icon 等基础组件的功能实现情况，也影响着 Dialog 等稍微高级点儿的组件的功能实现情况。比如 Dialog 异步加载就需要使用 Button 组件的 loading 属性，又比如 Dialog 对话框中页头和页尾也都用到了按钮组件来执行操作。

【参考内容】：

[1] 模态对话框 - 百度百科

[2] 什么是模态？