Vue-daum-postcode NPM

Vue Daum Postcode

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

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

See Example (sources)

Installation

npm i vue-daum-postcode

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

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