用vue3封装一个符合思维且简单实用的弹出层

最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用vue3封装一个符合思维且简单实用的弹出层,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

在平常开发中，弹出层算是一个最常用的组件了，尤其是后台的表单页，详情页，用户端的各种确认都很适合使用弹出层组件展示，但是一般组件库提供给我们的一般还是组件的形式，或者是一个简单的服务。

组件形式的弹出层，在我看来应该是组件库提供给我们二次封装用的，如果直接其实很不符合直觉

写在页面结构里，但是却不是在页面结构中展示，放在那个位置都不合适只能放在最下边

一个页面如果只有一个弹出层还好维护，多几个先不说放在那里，光维护弹出层的展示隐藏变量都是件头大的事情

弹出层中间展示的如果是一个表单或者一个业务很重的页面，逻辑就会跟页面混在一起不好维护，如果抽离成组件，在后台这种全是表格表单的时候，都抽离成组件太过麻烦

那么有没有更符合思维的方式使用弹窗呢，嘿嘿还真有，那就是服务创建弹出层

<template>
    <a-button @click="showConfirm">Confirm</a-button>
</template>
<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode, defineComponent } from 'vue';
import { Modal } from 'ant-design-vue';

export default def