vuejs-daum-postcode - GitLite

KO | EN

gitlite — search

#javascript #pytorch #postgresql #golang #agents #privacy #data-science #rag #open-source #kubernetes

vuejs-daum-postcode

(★ 14)

VueJS 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Daum 우편번호 검색 서비스를 Vue환경에서 간편하게 이용할 수 있습니다.

File Explorer

ZIP Download

- vuejs-daum-postcode.js
- vuejs-daum-postcode.min.js
- DaumPostcode.vue
- index.js
.babelrc
.gitignore
.npmignore
package.json
README.md
webpack.config.js
yarn.lock

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`npm install`

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

`script`

View Details ▼

Record all terminal output to a typescript file.

script

Record a new session to a file named `typescript` in the current directory:

exit

Stop recording:

script {{path/to/session.out}}

Record a new session to a custom filepath:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

VueJS 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Daum 우편번호 검색 서비스를 Vue 간편하게 이용할 수 있습니다.

## 설치

```shell
npm install --save vuejs-daum-postcode
```

## 사용

```javascript
<template>
  <div id="app">
    <DaumPostcode
      :on-complete=handleAddress
    />
  </div>
</template>

<script>
import DaumPostcode from 'vuejs-daum-postcode'

var handleAddress = (data) => {
  let fullAddress = data.address
  let extraAddress = ''
  if (data.addressType === 'R') {
    if (data.bname !== '') {
      extraAddress += data.bname
    }
    if (data.buildingName !== '') {
      extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName)
    }
    fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '')
  }

console.log(fullAddress) // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
}

export default {
  name: 'App',
  components: {
    DaumPostcode
  },
  methods: {
    handleAddress
  }
}
</script>
```

## props

- `on-complete` (필수) _[function]_ - 우편번호 검색이 끝났을 때 사용자가 선택한 정보를 받아올 콜백함수입니다.
  - `function(data: object) => void` : 주소 데이터의 구성은 [Daum 우편번호 서비스 가이드](http://postcode.map.daum.net/guide)를 참고해주세요.
- `width` _[number or string]_ - 컴포넌트의 가로 길이입니다. 300이하는 무시됩니다. 기본값: `'100%'`
- `height` _[number or string]_ - 컴포넌트의 세로 길이입니다. 400이하는 무시됩니다. 기본값: `400`
- `auto-close` _[bool]_ - 우편번호 검색이 끝났을 때 컴포넌트를 자동으로 닫습니다. 기본값: `false`
- `auto-resize` _[bool]_ - 우편번호를 검색할 때 검색 결과에 따라 컴포넌트의 세로 길이를 자동으로 조절합니다. 기본값: `false`
- `animation` _[bool]_ - 우편번호를 검색할 때 애니메이션 효과를 줍니다. 기본값: `false`
- `default-query` _[string]_ - 우편번호 검색창에 미리 표시할 검색어입니다. 기본값: `null`
- `theme` _[object]_ - Daum 우편번호 검색 모듈에 적용할 테마입니다. 테마의 설정은 [Daum 우편번호 서비스 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. 기본값: `null`
- `style` _[object]_ - 우편번호 검색창을 감싸는 최상위 컴포넌트에 적용할 스타일입니다. 기본값: `null`
- `script-url` _[string]_ - 컴포넌트에서 사용할 Daum 우편번호 스크립트 주소입니다. 기본값: `'https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js?autoload=false'`
- `error-message` _[string]_ - Daum 우편번호 스크립트가 로드되지 않을 때 나타낼 에러 메시지입니다. 기본값: `현재 Daum 우편번호 서비스를 이용할 수 없습니다. 잠시 후 다시 시도해주세요.`
- Daum 우편번호 생성자 속성들을 동일한 이름의 props로 전달할 수 있습니다. 속성값에 대해서는 [Daum 우편번호 서비스 가이드](http://postcode.map.daum.net/guide#attributes)를 참고해주세요.

## 안내

`vuejs-daum-postcode`는 Daum 우편번호 서비스와 독립적으로 제작된 패키지입니다. VueJS환경에서 발생하는 `vuejs-daum-postcode`의 버그는 패키지 레포지터리의 [이슈트래커](https://github.com/mango-tree/vuejs-daum-postcode/issues)에 말씀해주세요. 만약 Daum 우편번호 서비스 자체의 문제라고 생각하신다면, 다음 우편번호 서비스의 [FAQ](https://github.com/daumPostcode/QnA/blob/master/README.md)와 [이슈트래커](https://github.com/daumPostcode/QnA/issues)를 참조해주세요.