Vue-TWzipcode

Rewrite jQuery-TWzipcode in Vue.js

Screenshot

Example

Example

Installation

$ npm install vue-twzipcode --save

Usage

import Vue from 'vue';
import Twzipcode from 'vue-twzipcode';

const app = new Vue({
  el: '#app',
  components: {
    Twzipcode: Twzipcode,
    // or
    Twzipcode,
  },
});

<div id="app">
  <label>Address:</label>
  <twzipcode
    :class-names="{county: 'form-control', district: 'form-control', zipcode: 'form-control'}"
    default-zipcode="403"
    v-ref:twzipcode
  >
  </twzipcode>
</div>

Get Values

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 for more information.