File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container small-modal">
<div class="modal-title text-ct">
<h2>{{ title }}</h2>
</div>
<div class="modal-content-monthly">
<p class="alert-write text-ct" v-html="message">
</p>
<div v-if="radioAt">
<p>원본파일 : </p>
<label></label>
<p>동작 : </p>
<label><input type="radio" value="move" v-model="moveOrCopy.type">덮어쓰기</label>
<label><input type="radio" value="cancel" v-model="moveOrCopy.type">건너뛰기</label>
<label><input type="checkbox" v-model="moveOrCopy.checkBox">항상 이 동작 사용</label>
</div>
</div>
<div class="modal-end flex justify-center" style="flex-wrap: nowrap;">
<button class="blue-btn large-btn" id="confirmOk" @click="closeModal" @keyup.enter="closeModal">확인</button>
<button class="gray-btn large-btn" id="confirmCancel" @click="closeModal" v-show="confirmAt">취소</button>
<button class="gray-btn large-btn" id="confirmRadioCancel" @click="closeModal" v-show="radioAt">취소</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '모달 제목'
},
message: {
type: String,
default: '경고 메세지를 입력해주세요. <br /> 삭제,수정,추가 등등'
},
},
data() {
return {
isModalOpen: false,
activeTab: 'tab1',
modalType: 'tab-modal',
title: this.title,
message: this.message,
confirmAt: false,
radioAt: false,
moveOrCopy: {
type: null,
checkBox: null
},
}
},
methods: {
// 탭 변경
showTab: function (tabName) {
this.activeTab = tabName;
},
// 닫기
closeModal: function () {
this.isModalOpen = false;
this.confirmAt = false;
this.radioAt = false;
},
// 모달 호출
showModal: function () {
this.isModalOpen = true;
document.getElementById("confirmOk").focus()
},
// confirm 호출
showConfirm: async function () {
this.confirmAt = true;
this.isModalOpen = true;
document.getElementById("confirmOk").focus()
const promise = new Promise((resolve, reject) => {
document.getElementById("confirmCancel").addEventListener("click", async () => {
resolve('cancel')
});
document.getElementById("confirmOk").addEventListener("click", async () => {
resolve('ok')
});
});
return promise.then(
(id) => {
if (id == 'cancel') {
return false;
} else if (id == 'ok') {
return true;
}
}
);
},
// radio confirm 호출
showRadioConfirm: async function () {
this.radioAt = true;
this.isModalOpen = true;
this.moveOrCopy.type = "move";
this.moveOrCopy.checkBox = false;
document.getElementById("confirmOk").focus()
const promise = new Promise((resolve, reject) => {
document.getElementById("confirmRadioCancel").addEventListener("click", async () => {
resolve('cancel')
});
document.getElementById("confirmOk").addEventListener("click", async () => {
resolve('ok')
});
});
return promise.then(
(id) => {
if (id == 'cancel') {
this.moveOrCopy.type = "cancel"
this.moveOrCopy.checkBox = false
return this.moveOrCopy;
} else if (id == 'ok') {
return this.moveOrCopy;
}
}
);
},
setTitle: function (Title) {
this.title = Title;
},
setMessage: function (message) {
this.message = message;
},
},
watch: {
},
computed: {
},
components: {
},
}
</script>