Vue3造轮子--Dialog组件

180 阅读1分钟

前言: 前言:在写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 变量,然后改变它的值

技术点: 动态挂在组件

四. 效果展示

image.png

image.png

源码已放到Gitee托管,感兴趣的小伙伴可以访问 gitee.com/boheweb/min…