Vue2-TWzipcode

Rewrite jQuery-TWzipcode in Vue2

This Repo was refactored from CasperLaiTW.

Screenshot

Example

Not yet, but you can see Vue 1 example by CasperLaiTW.

Installation

$ yarn add vue2-twzipcode

Usage

<template>
  <twzipcode
    :class-names="{county: 'form-control', district: 'form-control', zipcode: 'form-control'}"
    default-zipcode="403"
    ref="twzipcode"
    @update="result"
  >
  </twzipcode>
</template>

<script>
  import Twzipcode from 'vue2-twzipcode';

  export default {
    methods: {
      result({ zipcode, county, district }) {
        console.log(zipcode, county, district);
      }
    },
    components: {
      Twzipcode
    },
  };
</script>

Get Values

If you don't want to use event binding, you can just use refs instead.

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

console.log(county, district, zipcode);  // 台中市, 西區, 403

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'}
focus	Object	null	focus="{ '台北市': [ '松山區', '大同區' ] }"
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.
3. focus will limit the selection by { COUNTY_NAME: [ DISTRICT_NAME1, DISTRICT_NAME2... ] }, and make zipcode readonly.
4. If district list in focus is an empty Array, it will use default list instead.

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.