臺灣郵遞區號 Vue components

# 基本設定


import Vue from 'vue'

new Vue({
  el: '#app',
  components: {
    // ... //
  }
})

# 所有郵遞區號


import { Zipcode } from 'twzipcode-vue'

...
  components: {
    TwzipcodeZipcode: Zipcode,
  },
...
          
        

<twzipcode-county text-template=":zipcode :county-:city"></twzipcode-county>

<select id="twzipcode__zipcode" class="twzipcode twzipcode__zipcode">
  <option value="100">100 臺北市-中正區</option>
  <option value="103">103 臺北市-大同區</option>

# 以縣市分組


import { ZipcodeGroupby } from 'twzipcode-vue'

...
  components: {
    TwzipcodeZipcodeGroupby: ZipcodeGroupby,
  },
...
          
        

<twzipcode-zipcode-groupby></twzipcode-zipcode-groupby>

<select id="twzipcode__zipcode--groupby" class="twzipcode twzipcode__zipcode twzipcode__zipcode--groupby">
  <optgroup label="臺北市">
    <option value="100">中正區</option>
    <option value="103">大同區</option>

# 縣市


import { County } from 'twzipcode-vue'

...
  components: {
    TwzipcodeZipcodeGroupby: ZipcodeGroupby,
  },
...
          
        

<twzipcode-county></twzipcode-county>

<select id="twzipcode__county" class="twzipcode twzipcode__county">
  <option value="臺北市">臺北市</option>
  <option value="基隆市">基隆市</option>

# 樣式


.twzipcode {
  font-weight: 700;
}

.twzipcode__county {
  background-color: red;
  color: white;
}
// 如果只有一個，可使用 #twzipcode__county 

.twzipcode__zipcode--groupby {
  background-color: yellow;
  color: brown;
}
// 如果只有一個，可使用 #twzipcode__zipcode--groupby

.twzipcode__zipcode {
  background-color: lightskyblue;
  color: dimgrey;
}
// 如果只有一個，可使用 #twzipcode__zipcode
# value與text格式

<twzipcode-zipcode value-template=":county:city"
                   value="臺北市信義區"
                   text-template=":zipcode :county:city"></twzipcode-zipcode>

<select id="twzipcode__zipcode" class="twzipcode twzipcode__zipcode">
  <option value="臺北市中正區">100 臺北市中正區</option>
  <option value="臺北市大同區">103 臺北市大同區</option>

# 英語

縣市的 value 預設為:zipcode，縣市的id即為縣市中文名稱；若需要英文名稱可改成:name。

value 和 text 可同時使用不同的 locale 。


<twzipcode-county value-locale="en"
                  text-locale="en"></twzipcode-county>

<twzipcode-zipcode-groupby value-locale="en"
                           text-locale="en"></twzipcode-zipcode-groupby>

<twzipcode-zipcode value-locale="en"
                   text-locale="en"
                   text-template=":zipcode :county / :city"></twzipcode-zipcode>


<select id="twzipcode__county" class="twzipcode twzipcode__county">
  <option value="臺北市">Taipei City</option>
  <option value="基隆市">Keelung City</option>

<select id="twzipcode__zipcode--groupby" class="twzipcode twzipcode__zipcode twzipcode__zipcode--groupby">
  <optgroup label="Taipei City">
    <option value="100">Zhongzheng District</option>
    <option value="103">Daton District</option>

<select id="twzipcode__zipcode" class="twzipcode twzipcode__zipcode">
  <option value="100">100 Taipei City / Zhongzheng District</option>
  <option value="103">103 Taipei City / Daton District</option>

# 事件

demoCallback：

若 component 的 value 改變，會 emit 一個 input 事件，並以參數方式回傳更新值。


<twzipcode-zipcode id="twzipcode__zipcode"
            @input="zipcode => document.getElementById('demoCallback').textContent = zipcode"></twzipcode-zipcode>

<twzipcode-zipcode id="twzipcode__zipcode"
            v-model="zipcode"></twzipcode-zipcode>

# 依縣市篩選


import { Zipcode, County } from 'twzipcode-vue'

...
  components: {
    TwzipcodeZipcode: Zipcode,
    TwzipcodeCounty: County
  },
  data () {
    return {
      myCounty: '臺中市',
      myZipcode: ''
    }
  }
...
          
        

<twzipcode-county id="twzipcode__county"
          v-model="myCounty"></twzipcode-county>

<twzipcode-zipcode id="twzipcode__zipcode"
           v-model="myZipcode"
           :filter-by-county="myCounty"></twzipcode-zipcode>

# props與預設值

counties.vuezipcodes.vuezipcodes.groupby.vue說明
value-localezh-twzh-twzh-twlocale.js
value-template:zipcode:zipcode:zipcode資料結構
text-localezh-twzh-twzh-twlocale.js
text-template:zipcode:zipcode :county :city:city資料結構
idtwzipcode__countytwzipcode__zipcodetwzipcode__zipcode--groupby
classtwzipcodetwzipcode__countytwzipcodetwzipcode__zipcodetwzipcodetwzipcode__zipcode
twzipcode__zipcode--groupby		若有指定其他 className ，則會附加在預設值後面。
namecountyzipcodezipcode
value第一筆資料第一筆資料第一筆資料可使用v-model綁定綁定。
若有更動 value 的格式，則需符合更改後格式。
filter-by-countyXundefinedX縣市的 id ，初始時要依哪個縣市篩選郵遞區號
如果要設定其他 attribute ，只需要按平常方式即可，例如<twzipcode-county size="10" required></twzipcode-county>
資料來源：twzipcode-data