Vue3造轮子--Dialog组件

---

theme: condensed-night-purple

前言： 前言:在写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托管，感兴趣的小伙伴可以访问 https://gitee.com/boheweb/mint-ui