弹窗：如何设计一个弹窗组件？

你好，我是大圣。

上一讲我们剖析了表单组件的实现模式，相信学完之后，你已经掌握了表单类型组件设计的细节，表单组件的主要功能就是在页面上获取用户的输入。

不过，用户在交互完成之后，还需要知道交互的结果状态，这就需要我们提供专门用来反馈操作状态的组件。这类组件根据反馈的级别不同，也分成了很多种类型，比如全屏灰色遮罩、居中显示的对话框Dialog，在交互按钮侧面显示、用来做简单提示的tooltip，以及右上角显示信息的通知组件Notification等，这类组件的交互体验你都可以在Element3官网感受。

今天的代码也会用Element3的Dialog组件和Notification进行举例，在动手写代码实现之前，我们先从这个弹窗组件的需求开始说起。

组件需求分析

我们先来设计一下要做的组件，通过这部分内容，还可以帮你继续加深一下对单元测试Jest框架的使用熟练度。我建议你在设计一个新的组件的时候，也试试采用这种方式，先把组件所有的功能都罗列出来，分析清楚需求再具体实现，这样能够让你后面的工作事半功倍。

首先无论是对话框Dialog，还是消息弹窗Notification，它们都由一个弹窗的标题，以及具体的弹窗的内容组成的。我们希望弹窗有一个关闭的按钮，点击之后就可以关闭弹窗，弹窗关闭之后还可以设置回调函数。

下面这段代码演示了dialog组件的使用方法，通过title显示标题，通过slot显示文本内容和交互按钮，而通过v-model就能控制显示状态。

< el - dialog
title = "提示": visible.sync = "dialogVisible"
width = "30%"
v - model: visible = "dialogVisible" >
  <
  span > 这是一段信息 < /span> <
  template #footer >
  <
  span class = "dialog-footer" >
  <
  el - button @click = "dialogVisible = false" > 取 消 < /el-button> <
  el - button type = "primary"
@click = "dialogVisible = false" > 确 定 < /el-button> <
  /span> <
  /template> <
  /el-dialog>

这类组件实现起来和表单类组件区别不是特别大，我们首先需要做的就是控制好组件的数据传递，并且使用Teleport渲染到页面顶层的body标签。

像Dialog和Notification类的组件，我们只是单纯想显示一个提示或者报错信息，过几秒就删除，如果在每个组件内部都需要写一个，并且使用v-if绑定变量的方式控制显示就会显得很冗余。

所以，这里就要用到一种调用Vue组件的新方式：我们可以使用JavaScript的API动态地创建和渲染Vue的组件。具体如何实现呢？我们以Notification组件为例一起看一下。

下面的代码是Element3的Notification演示代码。组件内部只有两个button，我们不需要书写额外的组件标签，只需要在