# 23 | 弹窗:如何设计一个弹窗组件?
你好,我是大圣。
上一讲我们剖析了表单组件的实现模式,相信学完之后,你已经掌握了表单类型组件设计的细节,表单组件的主要功能就是在页面上获取用户的输入。
不过,用户在交互完成之后,还需要知道交互的结果状态,这就需要我们提供专门用来反馈操作状态的组件。这类组件根据反馈的级别不同,也分成了很多种类型,比如全屏灰色遮罩、居中显示的对话框Dialog,在交互按钮侧面显示、用来做简单提示的tooltip,以及右上角显示信息的通知组件Notification等,这类组件的交互体验你都可以在[Element3官网](https://e3.shengxinjing.cn/#)感受。
今天的代码也会用Element3的Dialog组件和Notification进行举例,在动手写代码实现之前,我们先从这个弹窗组件的需求开始说起。
## 组件需求分析
我们先来设计一下要做的组件,通过这部分内容,还可以帮你继续加深一下对单元测试Jest框架的使用熟练度。我建议你在设计一个新的组件的时候,也试试采用这种方式,先把组件所有的功能都罗列出来,分析清楚需求再具体实现,这样能够让你后面的工作事半功倍。
首先无论是对话框Dialog,还是消息弹窗Notification,它们都由一个弹窗的标题,以及具体的弹窗的内容组成的。我们希望弹窗有一个关闭的按钮,点击之后就可以关闭弹窗,弹窗关闭之后还可以设置回调函数。
下面这段代码演示了dialog组件的使用方法,通过title显示标题,通过slot显示文本内容和交互按钮,而通过v-model就能控制显示状态。
```typescript
这是一段信息
```
这类组件实现起来和表单类组件区别不是特别大,我们首先需要做的就是**控制好组件的数据传递**,并且使用Teleport渲染到页面顶层的body标签。
像Dialog和Notification类的组件,我们只是单纯想显示一个提示或者报错信息,过几秒就删除,如果在每个组件内部都需要写一个