[vue2] vuetify 팝업 모달창 사용

vuetify를 사용한 팝업 모달창 사용법을 간단하게 정리해보았다.

들어가기

vuetify의 v-dialog을 사용해서 팝업모달창을 만들어보자.

작성자: ospace114@empal.com, http://ospace.tistory.com/

template 작성

<template>
    <v-dialog persistent max-width="800" v-model="isShow" @keydown.esc="onClose()">
        <input type="text" v-model="data" />
        <button @click="onOk()">확인</button>        
    </v-dialog>
</template>

script 작성

<script>
export default {
    data: function() {
        return {
            isShow: false,
            popupResolve: null,
            data: null,
        };
    },
    methods: {
        onClose(value) {
            this.isShow = false;
            if (!this.popupResolve) return;
            this.popupResolve(value);
            this.popupResolve = null;
            this.data = null;
        },
        onOk() {
            this.onClose(this.data);
        },
        open(data) {
            if (this.popupResolve) return Promise.reject();
            this.data = data || '';
            this.isShow = true;

            let self = this;
            return new Promise(function(resolve) {
                self.popupResolve = resolve;
            });
        },
    },
};
</script>

사용예

등록된 컴포넌트명이 "Popup"이라고 가정하겠다.

<Popup ref="popup"></Popup>

사용할 팝업창을 ref 형태로 추가한다.

let res = this.$refs.popup.open(this.popupValue);
if (res) {
    console.log('result is', res);
} else {
    console.log('popup cancel');
}

$refs 통해서 open()을 호출한다.

참고

[1] Dialogs, https://vuetifyjs.com/en/components/dialogs/, 2021.11.09
[2] v-dialog, https://vuetifyjs.com/en/api/v-dialog/, 2021.11.09