// Install NPM
npm i vue-daum-postcode --save
import VueDaumPostcode from "vue-daum-postcode"
Vue.use(VueDaumPostcode)
<template>
<section class="test">
<div class="post-box" v-if="postOpen">
<template>
<VueDaumPostcode @complete="oncomplete" />
</template>
</div>
<div class="form-box">
<input disabled v-model="address">
<div v-on:click="search">๊ฒ์</div>
</div>
</section>
</template>
<script>
import { VueDaumPostcode } from "vue-daum-postcode"
export default {
name: "test",
data(){
return{
address: null,
postOpen: false
}
},
components: {
VueDaumPostcode,
},
methods: {
search:function(){
this.postOpen = true
},
oncomplete:function(result){
if(result.userSelectedType === 'R'){ // ๋๋ก๋ช
์ฃผ์ ์ ํ
this.address = result.roadAddress;
}else{ // ์ง๋ฒ ์ฃผ์ ์ ํ
this.address = result.jibunAddress;
}
this.postOpen = false
}
}
}
</script>
<style scoped>
.form-box{ position:relative; z-index: 1; width:100%; height:500px; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.form-box input{ width:400px; height:50px; border:1px solid; border-radius: 3px; }
.form-box div{ margin-left:50px; width:150px; height:50px; background-color: #5366cf; font-size:15px; color:white; display: flex; justify-content: center; align-items: center; cursor:pointer; }
.post-box{ z-index: 2; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; }
</style>
์ถ์ฒ : https://yoyostudy.tistory.com/41 [[Vue js] Daum PostCode API ๋ก ์ฃผ์์ฐพ๊ธฐ]