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,我们不需要书写额外的组件标签,只需要在