23 | 弹窗：如何设计一个弹窗组件？
该思维导图由 AI 生成，仅供参考
组件需求分析
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了如何设计一个弹窗组件的过程，从组件需求分析、实现到测试全方位展示了弹窗组件的设计与实现过程。首先通过需求分析设计了包括标题、内容和关闭按钮的弹窗组件，并使用单元测试方法进行实现。其次，通过代码逻辑和测试代码的对比，展示了弹窗组件的具体实现过程，包括渲染样式、位置设置和关闭按钮功能等。最后，介绍了弹窗组件需要直接渲染在body标签下的特殊需求，并提供了使用Vue组件提供Javascript的动态渲染方法的示例。文章还提到了测试驱动开发（TDD）的方式来实现弹窗组件，强调了写测试代码的重要性。整体而言，本文详细介绍了弹窗组件的设计与实现过程，对于想要深入了解弹窗组件技术细节的读者具有很高的参考价值。
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
全部留言(16)
- 最新
- 精选
pzz这几节课直接垮了编辑回复: 有啥疑问可以留言讨论哦~
2021-12-14319
关关君测试代码和实现代码有的地方都没对应上，代码有的也没帖全，我估计我们新手跟着这篇文章一个字一个字抄都运行不出来作者回复: 你好，这一讲主要是演示和剖析element3源码，后面会有ts手把手写一个mini弹窗的加餐的
2021-12-1559
勤奋的樂看的脑壳疼，照着代码敲也运行不起来，而且github代码和课程代码还有不一样的地方。。。作者回复: 你好，这一讲主要是讲解element3的notification组件源码 , 代码可以在这里看到 https://github.com/hug-sun/element3/tree/master/packages/element3/src/components/Notification
2021-12-2323
link怎么又不上ts了作者回复: 后面的三个组件倾向于演示实际的组件要考虑的因素，就用的是element3的代码作为案例了
2021-12-141
小毛git上有组件的完整源码么作者回复: 源码用的是element3作为演示代码，https://github.com/hug-sun/element3/blob/master/packages/element3/src/components/Notification/src/Notification.js
2021-12-14
T1M最近4讲信息量都好大啊！头疼中……作者回复: 慢慢理解哈，不同类型的组件需要的知识点也不太一样
2021-12-13
周贺可能是我太菜了，无从下手~~2022-03-0212
ll
关于思考题： 文章中实现默认message是在options里，调用关系大致是 createNotification(options) --> createNotificationByOpts(options) --> createComponent(options), 这里的createComponent是默认调用的，结果就是产生一个Component，如果要实现思考题的效果，可以在creteNotificationByOpts里判断message 类型，如果message是 Vue.component 就直接挂载，不需要调用 createComponent，我猜是这么个过程。 然后我看了下element3中Notification的源码，发现，实现是在 createComponent(options) 函数中，就是判断了options.message 的类型，怎么判断的？isNode，如果是就 h(...,...,children),这里的children就是options.message就当children。如果类型是 string，就调用 h(...,...), 不传 children。2022-01-111
费城的二鹏思考题的实现方案，可以采用 slot 的方式吗？2021-12-131- Geek_956996能不能出一个组件库的详细教程2023-11-08归属地：江西