Vue twzipcode

Rewrite jQuery-TWzipcode in Vue.js

Version: 1.0.6 Updated: 08/12/2016

By: CasperLaiTW License: MIT

Downloads Last 30 Days: 52

Vue-TWzipcode

Build Status Coverage Status

Rewrite jQuery-TWzipcode in Vue.js

Screenshot

pic

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.

Categories: Vue js