https://github.com/casperlaitw/vue-twzipcode

Rewrite jQuery-TWzipcode in Vue.js
https://github.com/casperlaitw/vue-twzipcode

Last synced: 28 days ago
JSON representation

Rewrite jQuery-TWzipcode in Vue.js

• Host: GitHub
• URL: https://github.com/casperlaitw/vue-twzipcode
• Owner: CasperLaiTW
• License: mit
• Created: 2016-07-02T15:05:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-12T18:38:19.000Z (over 8 years ago)
• Last Synced: 2024-12-27T23:46:07.014Z (28 days ago)
• Language: JavaScript
• Homepage: https://casperlaitw.github.io/vue-twzipcode/
• Size: 88.9 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue-TWzipcode

[![Build Status](https://travis-ci.org/CasperLaiTW/vue-twzipcode.svg?branch=master)](https://travis-ci.org/CasperLaiTW/vue-twzipcode)

[![Coverage Status](https://coveralls.io/repos/github/CasperLaiTW/vue-twzipcode/badge.svg?branch=master)](https://coveralls.io/github/CasperLaiTW/vue-twzipcode?branch=master)

Rewrite [jQuery-TWzipcode](https://github.com/essoduke/jQuery-TWzipcode) in Vue.js

## Screenshot

![pic](/screenshots/screenshot.png)

## Example

[Example](https://casperlaitw.github.io/vue-twzipcode/)

## Installation

``` sh

$ npm install vue-twzipcode --save

```

## Usage

``` javascript

import Vue from 'vue';

import Twzipcode from 'vue-twzipcode';

const app = new Vue({

  el: '#app',

  components: {

    Twzipcode: Twzipcode,

    // or

    Twzipcode,

  },

});

```

``` html



  Address:

  

  



```


### Get Values

``` javascript

const {county, district, zipcode } = app.$refs.twzipcode;

// 台中市, 西區, 403

console.log(county, district, zipcode);

```

## Props

| Prop            | Type   | Default                                 | Example                                                                     |

|-----------------|--------|-----------------------------------------|-----------------------------------------------------------------------------|

| names           | Object | `{county: 'county', district: 'district', zipcode: 'zipcode'}` | `{county: 'my-county', district: 'my-district', zipcode: 'my-zipcode'}`       |

| classNames      | Object | `{county: '', district: '', zipcode: ''}`                      | `{county: 'form-control', district: 'form-control', zipcode: 'form-control'}` |

| defaultCounty   | String | '基隆市'                                                      | `default-county="台中市"`                                                                           |

| defaultDistrict | String | ''                                                             | `default-district="西區"`                                                                      |

| defaultZipcode  | String | ''                                                             | `default-zipcode="403"`                                                                        |

1. *Using props to component, notice `kebab-case`*

2. **defaultZipcode** is `highest` priority than defaultCounty and defaultDistrict. So if you using both, will be `ignored` defaultCounty and defaultDistrict props.

## Contributing

All contributions (in the form on pull requests, issues and feature-requests) are welcome.

## License

Licenced under the MIT License (MIT). Please see the [license file](LICENSE.md) for more information.