Recently, a pop-up window component is needed in a new project, so I made one. The following article mainly introduces how to use vue3 to encapsulate a thoughtful and simple and practical pop-up layer. The example code is introduced in the article in great detail. Friends in need can refer to the following
In normal development, the pop-up layer is considered to be the most commonly used component, especially the background form page, detail page, and various confirmations on the client side are very suitable for displaying with pop-up layer components, but the general component library provides us with components. form, or a simple service.
The pop-up layer in the form of components, in my opinion, should be provided by the component library for secondary packaging. If it is direct, it is actually very counterintuitive
It is written in the page structure, but it is not displayed in the page structure. It is not appropriate to put it in that position and can only be placed at the bottom
If a page has only one pop-up layer, it’s easy to maintain. Let’s not say how many more are placed there. It’s a big deal to maintain the display and hidden variables of the pop-up layer.
If the display in the middle of the pop-up layer is a form or a page with heavy business, the logic will be mixed with the page and difficult to maintain. If it is separated into components, it will be separated into components when the background is full of tables and forms. too much trouble
So is there a more thoughtful way to use pop-up windows? Hey, there really are, that is, the service creates a pop-up layer
<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>