Vue Daum Postcode

Daum 우편번호 서비스를 기반으로 작업된 Vue Component 입니다.

Vue 2.x를 사용하다면 v0.x branch브랜치를 참고해주세요.

• See Example (sources)

Installation

npm i vue-daum-postcode@next

Global Registration

Vue3 Global Registration Guide

import { createApp } from 'vue'
import VueDaumPostcode from 'vue-daum-postcode'


const app = createApp(/* */)

app.use(VueDaumPostcode) // export default is plugin

Local Registration

Vue3 Local Registration Guide

<template>
  <VueDaumPostcode :options="options" />
</template>
<script>
import { VueDaumPostcode } from 'vue-daum-postcode'

export default {
  components: {
    VueDaumPostcode, // export VueDaumPostcode is component
  },
}
</script>

기본 태그 변경 (Global Registration)

app.use(VueDaumPostcode, {
  name: 'DaumPostcode',
})

Postcode Js 경로 변경 (Global Registration)

기본 Daum postcode.js url(https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js)을 다른 url로 변경하려면 다음과 같이 설정하시면 됩니다.

app.use(VueDaumPostcode, {
  scriptUrl: "https://s3.ap-northeast-2.amazonaws.com/YOUR_BUCKET_NAME/postcode.v2.js"
})

Props

이름	타입	설명	기본값
q	String	검색어	""
animation	Boolean	Daum 우편번호, 생성자속성에서 animation.	false
noAutoMapping	Boolean	Daum 우편번호, 생성자속성에서 autoMapping, 기본값을 true에서 false로 조정.	false
noShorthand	Boolean	Daum 우편번호, 생성자속성에서 shorthand, 기본값을 true에서 false로 조정.	false
pleaseReadGuide	Number	Daum 우편번호, 생성자속성에서 pleaseReadGuide.	0
pleaseReadGuideTimer	Number	Daum 우편번호, 생성자속성에서 pleaseReadGuideTimer.	1.5
maxSuggestItems	Number	Daum 우편번호, 생성자속성에서 maxSuggestItems.	10
showMoreHName	Boolean	Daum 우편번호, 생성자속성에서 showMoreHName.	false
hideMapBtn	Boolean	Daum 우편번호, 생성자속성에서 hideMapBtn.	false
hideEngBtn	Boolean	Daum 우편번호, 생성자속성에서 hideEngBtn.	false
alwaysShowEngAddr	Boolean	Daum 우편번호, 생성자속성에서 alwaysShowEngAddr.	false
zonecodeOnly	Boolean	Daum 우편번호, 생성자속성에서 zonecodeOnly.	false
noSubmitMode	Boolean	Submit Mode 비활성화시 사용. (관련 이슈 링크)	false
theme	object	Daum 우편번호, 생성자속성에서 theme.	{}

Events

이름	설명
search	Daum 우편번호, 속성에서 onsearch.
complete	Daum 우편번호, 속성에서 oncomplete.
resize	Daum 우편번호, 속성에서 onresize.