最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用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>
