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
<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>
<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>
counties.vue | zipcodes.vue | zipcodes.groupby.vue | 說明 | |
---|---|---|---|---|
value-locale | zh-tw | zh-tw | zh-tw | locale.js |
value-template | :zipcode | :zipcode | :zipcode | 資料結構 |
text-locale | zh-tw | zh-tw | zh-tw | locale.js |
text-template | :zipcode | :zipcode :county :city | :city | 資料結構 |
id | twzipcode__county | twzipcode__zipcode | twzipcode__zipcode--groupby | |
class | twzipcode twzipcode__county | twzipcode twzipcode__zipcode | twzipcode twzipcode__zipcode twzipcode__zipcode--groupby | 若有指定其他 className ,則會附加在預設值後面。 |
name | county | zipcode | zipcode | |
value | 第一筆資料 | 第一筆資料 | 第一筆資料 | 可使用v-model 綁定綁定。若有更動 value 的格式,則需符合更改後格式。 |
filter-by-county | X | undefined | X | 縣市的 id ,初始時要依哪個縣市篩選郵遞區號 |
如果要設定其他 attribute ,只需要按平常方式即可,例如<twzipcode-county size="10" required></twzipcode-county> |