vdp

vue-daum-postcode

✉️ 다음 우편번호 서비스 Componet for Vue 2 & 3.

Showing:

Popularity

Downloads/wk

930

GitHub Stars

47

Maintenance

Last Commit

4d ago

Contributors

7

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

Vue Daum Postcode

Build Downloads Version License VueJS 3.x Language Typescript
dependencies Status devDependencies Status

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

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

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

이름타입설명기본값
qString검색어""
animationBooleanDaum 우편번호, 생성자속성에서 animation.false
noAutoMappingBooleanDaum 우편번호, 생성자속성에서 autoMapping, 기본값을 true에서 false로 조정.false
noShorthandBooleanDaum 우편번호, 생성자속성에서 shorthand, 기본값을 true에서 false로 조정.false
pleaseReadGuideNumberDaum 우편번호, 생성자속성에서 pleaseReadGuide.0
pleaseReadGuideTimerNumberDaum 우편번호, 생성자속성에서 pleaseReadGuideTimer.1.5
maxSuggestItemsNumberDaum 우편번호, 생성자속성에서 maxSuggestItems.10
showMoreHNameBooleanDaum 우편번호, 생성자속성에서 showMoreHName.false
hideMapBtnBooleanDaum 우편번호, 생성자속성에서 hideMapBtn.false
hideEngBtnBooleanDaum 우편번호, 생성자속성에서 hideEngBtn.false
alwaysShowEngAddrBooleanDaum 우편번호, 생성자속성에서 alwaysShowEngAddr.false
zonecodeOnlyBooleanDaum 우편번호, 생성자속성에서 zonecodeOnly.false
noSubmitModeBooleanSubmit Mode 비활성화시 사용. (관련 이슈 링크)false
themeobjectDaum 우편번호, 생성자속성에서 theme.{}

Events

이름설명
load다음 우편번호가 로딩 되었을 때 발생
searchDaum 우편번호, 속성에서 onsearch.
completeDaum 우편번호, 속성에서 oncomplete.
resizeDaum 우편번호, 속성에서 onresize.

Slots

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100