Vue-twzipcode NPM

Vue-TWzipcode

Screenshot

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"`

Using props to component, notice kebab-case
defaultZipcode is highest priority than defaultCounty and defaultDistrict. So if you using both, will be ignored defaultCounty and defaultDistrict props.