Vuetify3 와 vue3를 활용해서 dynamic confirm 컨퍼런트 생성하기.
Vuetify3 와 vue3를 활용해서 dynamic confirm 컨퍼런트 생성하기. Vuetify3 와 vue3를 활용해서 dynamic confirm 컨퍼런트 생성하기. 이번에 vuetify3와 vue3를 사용하는 프로젝트에서 confirm component를 개발해야해서 찾아서 개발해보던 중에 관련된 리소스가 많이 존재하지 않는것 같아, 이 내용을 공유할려고 합니다. 저는 이런 방식으로 dynamic Confirm 컨퍼런트를 개발했습니다. 개발해야하는 Component 설명 https://vuetifyjs.com/en/components/dialogs/#usage 해당 Component를 통해 유저가 액션이 발생할 경우, 한번 더 확인하는 형태의 수단으로 사용 문제점: 기본적으로 component를 사용하는 page에 import후에 이벤트를 받아서 사용해야했음. 이 경우 불필요하게 모든 페이지 내에 해당 component를 import해야하는 번거러움이 생김. 또 코드가 수정되거나 이름이 변경되었을 경우 사용하는 모든 페이지에 내용을 수정해야함 해결방법: Dynamic Component를 사용해서 dialog를 로딩하고, 결과값을 promise를 통해 전달 받도록 작업 샘플 코드 confirm/index.js import Confirm from './Confirm.vue' ; export function confirm ( options = { } ) { const wrapper = document . createElement ( 'div' ) ; document . body . appendChild ( wrapper ) ; return new Promise ( ( resolve ) => { let app ; const comp = h ( Confirm , { messag...