vue-js-modal(popup) 사용법

vue-js-modal

프로그램을 개발하다 보면 

위와 같은 인터페이스가 필요할 때가 있습니다. 

설치 방법은 

Install

npm install vue-js-modal --save

그 다음에 

main.js  에 

import VModal from 'vue-js-modal'

Vue.use(VModal, { dynamic: true })

을 추가해 주면 됩니다. 

데모사이트 =  http://vue-js-modal.yev.io/  

데모 사이트에 여러가지 데모가 있지만 

그중에 제일 자유도가 높게 UI 를 구성할수 있는 

CustomComponentModal

을 알아 보도록 하겠습니다. 

참고한 소스는 https://github.com/euvl/vue-js-modal/tree/master/demo/client_side_rendering/src

해당 opensource demo 사이트에서의 소스를 기반을 예제를 작성 하였습니다. 

우선 CustomComponentModal 로 사용할 vue 를 만들겠습니다. 

아래와 같이 만들었습니다.  (input 와 버튼 2개가 있는 vue 탬플릿 입니다.)

<template>

<div class="container">

<div class="input-group col-md-3">

<span class = "input-group-addon">

PW

</span>

<input type="text" v-model="del_password" class="form-control col-md-2">

</div>

<div class="row col-md-6">

<input class="btn btn-default col-md-3" @click="del_data" type="button" value="삭제">

<input class="btn btn-default col-md-3" @click="$emit('close')" type="button" value="취소">

</div>

</div>

</template>

<script>

export default {

data:function(){

return {

del_password:'',

}

},props : [

'hot_table',

],methods : {

del_data(){

this.$emit('close')

}

}

}

</script>

그리고 실제 vue 에서 사용할때에는 

<template>

<div class="row">

<modals-container />

</div>

</template>

<script>

import DelPopup from './DelPopup.vue'

export default {

mounted(){

this.doc_del_rendar();

},methods : {

doc_del_rendar(){

this.$modal.show(DelPopup,{

hot_table : 'data',

modal : this.$modal },{

name: 'dynamic-modal',

width : '330px',

height : '130px',

draggable: true,

})

}

}

}

</script>

여기서 중요한 점은

 <modals-container />

와 

this.$modal.show(DelPopup,{

hot_table : 'data',

modal : this.$modal },{

name: 'dynamic-modal',

width : '330px',

height : '130px',

draggable: true,

})

해당 부분 입니다. 

modal.show 에서 

첫번째는 파라메터는 vue 

두번째는 props 로 상속 받을 객체 

세번째는 vue-js-modal 에서 제공하는 셋팅들 

네번째도 있는데요  아래 이벤트에 대한 처리 입니다. (예제 코드는 vue-js-modal github 에 있습니다.)

Events

Name	Description
before-open	Emits while modal is still invisible, but was added to the DOM
opened	Emits after modal became visible or started transition
before-close	Emits before modal is going to be closed. Can be stopped from the event listener calling event.stop()(example: you are creating a text editor, and want to stop closisng and ask user to correct mistakes if text is not valid)
closed	Emits right before modal is destoyed

위와 같이 해서 뛰우면 

위와 같은 화면이 완성 되게 됩니다. 

popup 닫기는  

this.$emit('close')

위와 같이 이벤트 close 를 던져서 닫을수 있습니다. 

좀더 자세한 내용은 

https://github.com/euvl/vue-js-modal/  소스의 Demo 소스를 참조 하면 유용합니다. 

데모 소스의 결과물은 

http://vue-js-modal.yev.io/

해당 사이트 입니다.