一个弹窗组件的难点

最简单的一个弹窗

当你像往常一样写vue3的时候，你想为页面加一个弹窗，那就直接在template里写一个div，这个div就是弹窗，有需要的时候就让他show就行了。
就像下面这样

<template>
	<div v-if="ifDialogShow">
  		弹窗
	</div>
</template>

这样，只要控制ifDialogShow的值就可以控制弹窗的显示了。

如果要添加一个其他样式的弹窗，就得在下面再新加一个div。

<template>
	<div v-if="ifDialogShow1">
  		弹窗1
	</div>
	<div v-if="ifDialogShow2">
  		弹窗2
	</div>
</template>

如果其他页面也要弹窗，就得把这些都复制过去，或者提取成一个组件。

十几个页面都需要弹窗

这时，如果有需求：好多页面要出现很多的不同样式的弹窗，还能这样继续加下去吗？肯定是不行的。
这时，我们可以实现类似其他UI组件库中的弹窗效果，只需要用js调用$dialog这样的命令，就可以呼出一个弹窗。
这样实现的关键就在于Vue3的createApp方法
当需要一个弹窗时，我们先创建一个新的页面元素。将这个元素挂载上窗口的VueAPP。

这时，只需要在顶层提供一个这样的方法就可以了，当调用myDialog时就自动创建元素–>挂载到元素上。这样就不需要在模板中来回复制粘贴了。

弹窗还都不一样

每次调用myDialog的时候，都是固定的模板，这时，我们新建一个dialogs文件夹，专门用来存放对话框vue文件，当调用的时候，根据参数选择挂载哪个文件

不一样中还要带点相同之处

像windows操作系统中的窗口一样，每个窗口都有类似的标题栏。要实现这样的效果，我们可以创建一个公用的模板对话框，在这个文件中，再次挂载不同的对话框内容文件

流程：
调用myDialog->创建元素->挂载公用的模板->找到模板中的ref->在ref上挂载不同的内容

模仿windows操作系统

下一期实现