Vue Daum Postcode

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

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

- See Example (sources)

Installation

``bash
npm i vue-daum-postcode
`


Global Registration

Vue3 Global Registration Guide

`js
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

`vue


`

기본 태그 변경 (Global Registration)

`js
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로 변경하려면 다음과 같이 설정하시면 됩니다.

`js
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

이름 | 설명
------------------------- | -----------
load | 다음 우편번호가 로딩 되었을 때 발생
search | Daum 우편번호, 속성에서 onsearch.
complete | Daum 우편번호, 속성에서 oncomplete.
resize | Daum 우편번호, 속성에서 onresize.
error | 스크립트 로딩 실패시 발생

Slots

이름 | 설명
------------------------- | ---------
loading` | 다음 우편번호가 아직 완전히 불러오기 전에 보여줄 내용이 있는 경우 해당 슬롯에 넣습니다. (ex. spinner)