최근에 새로운 프로젝트에서 팝업창 컴포넌트가 필요해서 하나 만들었습니다 다음 글에서는 vue3를 사용하여 사려 깊고 간단하고 실용적인 팝업 레이어를 캡슐화하는 방법을 주로 소개합니다. 도움이 필요한 친구는 다음을 참조할 수 있습니다.
일반적인 개발에서 팝업 레이어는 가장 일반적으로 사용되는 구성 요소로 간주되며 특히 배경 양식 페이지, 상세 페이지 및 클라이언트 측의 다양한 확인은 팝업 레이어 구성 요소로 표시하기에 매우 적합하지만 일반적인 구성 요소 라이브러리는 구성 요소, 형식 또는 간단한 서비스를 제공합니다.
컴포넌트 형태의 팝업 레이어는 2차 패키징을 위해 컴포넌트 라이브러리에서 제공해야 한다고 생각합니다.
페이지 구조로 작성되어 있으나 페이지 구조로 표시되지 않고 해당 위치에 두는 것은 적절하지 않으며 맨 아래에만 배치할 수 있습니다.
페이지에 팝업 레이어가 하나만 있으면 유지 관리가 쉽고 얼마나 더 배치되는지 말하지 말고 팝업 레이어의 표시 및 숨겨진 변수를 유지하는 것만으로도 큰일입니다.
팝업 레이어 중간에 있는 디스플레이가 폼이나 업무량이 많은 페이지라면 로직이 페이지와 혼재되어 유지보수가 어렵습니다. 배경은 테이블과 양식으로 가득합니다. 너무 많은 문제
그렇다면 팝업 창을 사용하는 더 사려 깊은 방법이 있습니까?이봐, 실제로 서비스가 팝업 레이어를 생성합니다
<template>
<a-button @click="showConfirm">확인</a-button>
</template>
<script lang="ts">
'@ant-design/icons-vue'에서 { ExclamationCircleOutlined } 가져오기;
import { createVNode, defineComponent } from 'vue';
import { Modal } from 'ant-design-vue';
export default defineComponent({
setup() { const showConfirm = () => { Modal.confirm({ title: '이 항목을 삭제하시겠습니까?', icon: createVNode(ExclamationCircleOutlined), content: '확인 버튼을 클릭했을 때 , 이 대화 상자는 1초 후에 닫힙니다.', onOk() { return new Promise((resolve, reject) => { setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); }).catch(( ) => console.log('죄송합니다!')); }, // eslint-disable-next-line @typescript-eslint/no-empty-function onCancel() {}, }); };
return { showConfirm, };
},
});
</스크립트>