[Vue] vuejs-daum-postcode 다음 주소 검색 modal

 

 

# test.vue

<template>
    <div>
        <input type="text" name="" :value="addr1" placeholder="기본주소를 검색해 주세요"/>
        <a class="right_input_btn" @click="isModalViewed = true"> 주소 검색</a>                                    
        <ModalView v-if="isModalViewed" @close-modal="isModalViewed = false">
            <DaumPostcode :on-complete=showApi />     
        </ModalView>
    </div>
</template>
 
<script>
import ModalView from "./ModalView";
import DaumPostcode from 'vuejs-daum-postcode';
 
export default {
  name: 'join',
  components: {
    ModalView,
    DaumPostcode
  },
  props: {
    msg: String
  },
  methods: {
    showApi(data) { 
        console.log("ddd", data);
        // new window.daum.Postcode({ oncomplete: (data) => {
        // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. 
        // 도로명 주소의 노출 규칙에 따라 주소를 조합한다. 
        // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. 
        let fullRoadAddr = data.roadAddress; 
        // 도로명 주소 변수 
        let extraRoadAddr = ''; 
        // 도로명 조합형 주소 변수 
        // 법정동명이 있을 경우 추가한다. (법정리는 제외) 
        // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다. 
        if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){ extraRoadAddr += data.bname; } 
        // 건물명이 있고, 공동주택일 경우 추가한다. 
        if(data.buildingName !== '' && data.apartment === 'Y'){ 
            extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); 
        } 
        // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. 
        if(extraRoadAddr !== ''){ extraRoadAddr = ' (' + extraRoadAddr + ')'; } 
        // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. 
        if(fullRoadAddr !== ''){ fullRoadAddr += extraRoadAddr; } 
        // 우편번호와 주소 정보를 해당 필드에 넣는다. 
        //this.zip = data.zonecode; //5자리 새우편번호 사용 
        this.addr1 = fullRoadAddr; 
        this.isModalViewed = false;
            
    },
  },
  data() {
    return {
      isModalViewed: false, addr1: ''
    }
  },
}
</script>

 

 

# ModalView

 

<template>
  <div class="modal">
    <div class="overlay" @click="$emit('close-modal')"></div>
    <div class="modal-card">
      <slot />
    </div>
  </div>
</template>
 
<script>
export default {};
</script>
 
<style>
/* Modal */
.modal,
.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.overlay {
  opacity: 0.5;
  background-color: black;
}
.modal-card {
  position: relative;
  max-width: 80%;
  margin: auto;
  margin-top: 30px;
  padding: 20px;
  background-color: white;
  min-height: 500px;
  z-index: 10;
  opacity: 1;
}
</style>

 

참고

 

https://github.com/wan2land/vue-daum-postcode

GitHub - wan2land/vue-daum-postcode: ✉️ 다음 우편번호 서비스 Componet for Vue 2 & 3.