用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 defineComponent({ 
    setup() {
     const showConfirm = () => { 
       Modal.confirm({ 
          title: 'Do you want to delete these items?',
          icon: createVNode(ExclamationCircleOutlined),
          content: 'When clicked the OK button, this dialog will be closed after 1 second', 
          onOk() { 
            return new Promise((resolve, reject) => { 
              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); 
             }).catch(() => console.log('Oops errors!')); }, 
              // eslint-disable-next-line @typescript-eslint/no-empty-function 
          onCancel() {},
        });
       }; 
     return { showConfirm, };
     },
    }); 
</script>