VueJS에서 많이 사용되는 UI 라이브러리인 element UI의 diablog 컴포넌트에 대하여 알아봅니다.



# dialog component
화면에 window.open()의 새로운 창이 아닌 내부 레이어를 사용한 모달창을 띄우는 경우 dialog라고 부르기도 합니다. 엘리먼트UI(element UI) 역시 dialog를 사용할 수 있도록 컴포넌트를 제공합니다.

<el-dialog></el-dialog>



이 컴포넌트를 사용하면 쉽고 빠르게 모달창을 만들고 제어하는 것이 가능합니다. 몇 가지 장점으로는...

- Body 태그에 추가할 수 있음
- open, close 이벤트에 추가로 컴포넌트가 사라지거나 제거하는 경우의 제어도 가능
- 외부 클릭 닫기 또는 fullscreen 옵션 지원

이처럼 유용한 옵션을 제공합니다. 아래는 제공하는 다양한 프로터티입니다.


@ 자주 사용되는 것들
visible // 닫기, 열기 제어를 위한 변수 지정
title // Dialog의 제목에 추가됨
width // width 크기를 결정
append-to-body // Body 태그에 dialog를 붙여서 생성함
fullscreen // 전체 화면이 가능
lock-scroll // 바디 태그 scroll 잠금
custom-class // 클래스를 추가할 때 사용함


@ 그 외의 것들
close-on-press-escape // 외부 영역 클릭시 닫을 수 있음
close-on-click-modal // 모달에 close 버튼으로 닫을 수 있음
center // header 그리고 footer를 센터에 중앙 정렬

그럼 위 속성들을 사용하여 예제를 만들어보겠습니다.


! 간단한 예제코드 보기
아래는 심플한 예제로 모달창을 생성하였습니다.
<el-dialog
  visible="toggleDialog"
  title="Welcome to 웹이즈프리"
  width="600"
  custom-class="custom-modal custom-ui"></el-dialog>


! el-dialog 이벤트 알아보기

이벤트를 사용하여 제어하는 방법입니다. 가장 많이 쓰이는 모달창이 열리고 닫히는 경우 이벤트를 추가할 수 있습니다. @open과 @close를 사용합니다.(v-on:open v-on:close)
@open
@close
@opened
@closed

위 이벤트에서 opened, closed는 애니메이션 효과가 끝나고 이벤트를 수행할 지의 차이입니다. 나머지는 동일합니다.
<el-dialog @close="doSomething"></el-dialog>

위 예제는 닫히기 전에 doSomething이라는 메소드를 실행하게 됩니다. 아래처럼 메소드가 필요하겠죠.
methods: {
  doSomething() {
    console.log('Closed')
  }
}

open, close, opened, closed는 모두 창을 닫으면서 이벤트를 수행합니다. 만약 창을 닫지 않고 닫으려고 할 때에 이벤트를 호출할 경우 아래처럼 before-close 속성을 사용할 수 있습니다.
<el-dialog :before-close="doSomething2()"></el-dialog>

위 코드는 창을 닫으려고 하면 호출되며 창이 안 닫치게 됩니다. 참고로 이벤트 후 창을 닫고 싶다면 @close처럼 이벤트 속성을 사용하면 됩니다. 아니면 $refs를 사용해 태그를 지정한 후 close()를 사용하는 것도 방법입니다.

여기까지 el-dialog를 알아보았습니다.