前言： 前言:在写Dialog组件时，写的笔记，记录一下学习过程~
Dialog组件
一.Dialog需求分析与API设计
1. 参考一下别人的对话框
- AntD
- 还可以参考 Bulma、Element、iView、Vuetify等
2. 需求
- 点击后弹出
- 有遮罩层 overlay
- 有 close 按钮
- 有标题
- 有内容
- 有 yes / no 按钮
二.API设计
1.Dialog组件怎么用
<Dialog
visible
title="标题"
@yes="fn1" @no="fn"
></Dialog>
三.写代码
-
步骤
- 写HTML,CSS,JS
- 测试
- 改写代码
- 再测试
- 再改写
- 在测试
- ...
- 让 Dialog 支持 visible 属性
注意不能修改 props
-
让 Dialog 可以点击关闭
-
让 Dialog 支持自定义内容
使用插槽slot- 使用具名插槽
-
把 Dialog 移到 body 下
- 防止 Dialog 被遮挡
- 新组件：Teleport
-
一句话打开 Dialog
- 我不想声明 visible 变量，然后改变它的值
技术点： 动态挂在组件
四. 效果展示
源码已放到Gitee托管，感兴趣的小伙伴可以访问 gitee.com/boheweb/min…
