16 KiB
23 | 弹窗：如何设计一个弹窗组件？
你好，我是大圣。
上一讲我们剖析了表单组件的实现模式，相信学完之后，你已经掌握了表单类型组件设计的细节，表单组件的主要功能就是在页面上获取用户的输入。
不过，用户在交互完成之后，还需要知道交互的结果状态，这就需要我们提供专门用来反馈操作状态的组件。这类组件根据反馈的级别不同，也分成了很多种类型，比如全屏灰色遮罩、居中显示的对话框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，我们不需要书写额外的组件标签，只需要在