vue Model 창 만들기

참고링크	https://kr.vuejs.org/v2/examples/modal.html

1. Modal.vue파일 생성

(components/common폴더 생성 후 Modal.vue파일 생성함)

- template 내용 / style 내용 붙여 넣기

<template>    <transition name="modal">    <div class="modal-mask">     <div class="modal-wrapper">      <div class="modal-container">       <div class="modal-header">        <slot name="header">         모달 상단        </slot>       </div>       <div class="modal-body">        <slot name="body">         모달 내용        </slot>       </div>       <div class="modal-footer">        <slot name="footer">         모달 하단         <button class="modal-default-button" @click="$emit('close')">          닫기         </button>        </slot>       </div>      </div>     </div>    </div>   </transition> </template> <script> export default { } </script> <style> .modal-mask {   position: fixed;   z-index: 9998;   top: 0;   left: 0;   width: 100%;   height: 100%;   background-color: rgba(0, 0, 0, .5);   display: table;   transition: opacity .3s ease; } .modal-wrapper {   display: table-cell;   vertical-align: middle;   color:#555555; } .modal-container {   width: 300px;   margin: 0px auto;   padding: 20px 30px;   background-color: #fff;   border-radius: 2px;   box-shadow: 0 2px 8px rgba(0, 0, 0, .33);   transition: all .3s ease;   font-family: Helvetica, Arial, sans-serif; } .modal-header h3 {   margin-top: 0;   color: #42b983; } .modal-body {   margin: 20px 0; } .modal-default-button {   float: right; } /*  * The following styles are auto-applied to elements with  * transition="modal" when their visibility is toggled  * by Vue.js.  *  * You can easily play with the modal transition by editing  * these styles.  */ .modal-enter {   opacity: 0; } .modal-leave-active {   opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container {   -webkit-transform: scale(1.1);   transform: scale(1.1); } </style>

 

2. 모달을 불러올 페이지에 모달 소스 넣기

template	<button id="show-modal" @click="showModal = true">Show Modal</button>      <!-- use the modal component, pass in the prop -->      <Modal v-if="showModal" @close="showModal = false">        <!--        you can use custom content here to overwrite        default content        -->        <h3 slot="header">모달 창 제목</h3>      </Modal>
script	<script> import Modal from '../components/common/Modal.vue' export default {    data() {      return{        showModal: false      }       },    components : {      Modal    } } </script>

 

vue3버전  ---  v-slot : header  로 작업