# 地址选择 AddressSelect
在表单中收集中国的省市区地址选择组件
# 基础用法
基本用法
包括如何选择、如何触发事件
<title>基本用法</title>
<describe>包括如何选择、如何触发事件</describe>
<template>
<hc-address-select
v-model="value"
:text="text"
:display-type="displayType"
clearable
:fetch-country-data="fetchCountryData"
:fetch-region-data="fetchRegionData"
@change="handleChange"
@clear="handleClear"
/>
</template>
<script>
export default {
data: function () {
return {
value: {
country: '86',
street: '天安门大街Q-22332号',
province: '140000',
city: '140100'
},
text: {
country: '中国',
province: '山西省',
city: '太原市',
county: undefined,
street: 'afwefw'
},
displayType: 2
}
},
computed: {
treeData: function () {
return [{"parent":"00","text":"中国","value":"86","children":[{"value":"110000","text":"北京市","parent":"86","children":[{"value":"110100","text":"市辖区","parent":"110000","children":[{"value":"110101","text":"东城区","parent":"110100"},{"value":"110102","text":"西城区","parent":"110100"},{"value":"110105","text":"朝阳区","parent":"110100"},{"value":"110106","text":"丰台区","parent":"110100"},{"value":"110107","text":"石景山区","parent":"110100"},{"value":"110108","text":"海淀区","parent":"110100"},{"value":"110109","text":"门头沟区","parent":"110100"},{"value":"110111","text":"房山区","parent":"110100"},{"value":"110112","text":"通州区","parent":"110100"},{"value":"110113","text":"顺义区","parent":"110100"},{"value":"110114","text":"昌平区","parent":"110100"},{"value":"110115","text":"大兴区","parent":"110100"},{"value":"110116","text":"怀柔区","parent":"110100"},{"value":"110117","text":"平谷区","parent":"110100"},{"value":"110118","text":"密云区","parent":"110100"},{"value":"110119","text":"延庆区","parent":"110100"}]},{"value":"140000","text":"山西省","parent":"86","children":[{"value":"140100","text":"太原市","parent":"140000","children":[{"value":"140105","text":"小店区","parent":"140100"},{"value":"140106","text":"迎泽区","parent":"140100"},{"value":"140107","text":"杏花岭区","parent":"140100"},{"value":"140108","text":"尖草坪区","parent":"140100"},{"value":"140109","text":"万柏林区","parent":"140100"},{"value":"140110","text":"晋源区","parent":"140100"},{"value":"140121","text":"清徐县","parent":"140100"},{"value":"140122","text":"阳曲县","parent":"140100"},{"value":"140123","text":"娄烦县","parent":"140100"},{"value":"140181","text":"古交市","parent":"140100"}]},{"value":"140200","text":"大同市","parent":"140000","children":[{"value":"140202","text":"城区","parent":"140200"},{"value":"140203","text":"矿区","parent":"140200"},{"value":"140211","text":"南郊区","parent":"140200"},{"value":"140212","text":"新荣区","parent":"140200"},{"value":"140221","text":"阳高县","parent":"140200"},{"value":"140222","text":"天镇县","parent":"140200"},{"value":"140223","text":"广灵县","parent":"140200"},{"value":"140224","text":"灵丘县","parent":"140200"},{"value":"140225","text":"浑源县","parent":"140200"},{"value":"140226","text":"左云县","parent":"140200"},{"value":"140227","text":"大同县","parent":"140200"}]},{"value":"140300","text":"阳泉市","parent":"140000","children":[{"value":"140302","text":"城区","parent":"140300"},{"value":"140303","text":"矿区","parent":"140300"},{"value":"140311","text":"郊区","parent":"140300"},{"value":"140321","text":"平定县","parent":"140300"},{"value":"140322","text":"盂县","parent":"140300"}]},{"value":"140400","text":"长治市","parent":"140000","children":[{"value":"140402","text":"城区","parent":"140400"},{"value":"140411","text":"郊区","parent":"140400"},{"value":"140421","text":"长治县","parent":"140400"},{"value":"140423","text":"襄垣县","parent":"140400"},{"value":"140424","text":"屯留县","parent":"140400"},{"value":"140425","text":"平顺县","parent":"140400"},{"value":"140426","text":"黎城县","parent":"140400"},{"value":"140427","text":"壶关县","parent":"140400"},{"value":"140428","text":"长子县","parent":"140400"},{"value":"140429","text":"武乡县","parent":"140400"},{"value":"140430","text":"沁县","parent":"140400"},{"value":"140431","text":"沁源县","parent":"140400"},{"value":"140481","text":"潞城市","parent":"140400"}]},{"value":"140500","text":"晋城市","parent":"140000","children":[{"value":"140502","text":"城区","parent":"140500"},{"value":"140521","text":"沁水县","parent":"140500"},{"value":"140522","text":"阳城县","parent":"140500"},{"value":"140524","text":"陵川县","parent":"140500"},{"value":"140525","text":"泽州县","parent":"140500"},{"value":"140581","text":"高平市","parent":"140500"}]},{"value":"140600","text":"朔州市","parent":"140000","children":[{"value":"140602","text":"朔城区","parent":"140600"},{"value":"140603","text":"平鲁区","parent":"140600"},{"value":"140621","text":"山阴县","parent":"140600"},{"value":"140622","text":"应县","parent":"140600"},{"value":"140623","text":"右玉县","parent":"140600"},{"value":"140624","text":"怀仁县","parent":"140600"}]},{"value":"140700","text":"晋中市","parent":"140000","children":[{"value":"140702","text":"榆次区","parent":"140700"},{"value":"140721","text":"榆社县","parent":"140700"},{"value":"140722","text":"左权县","parent":"140700"},{"value":"140723","text":"和顺县","parent":"140700"},{"value":"140724","text":"昔阳县","parent":"140700"},{"value":"140725","text":"寿阳县","parent":"140700"},{"value":"140726","text":"太谷县","parent":"140700"},{"value":"140727","text":"祁县","parent":"140700"},{"value":"140728","text":"平遥县","parent":"140700"},{"value":"140729","text":"灵石县","parent":"140700"},{"value":"140781","text":"介休市","parent":"140700"}]},{"value":"140800","text":"运城市","parent":"140000","children":[{"value":"140802","text":"盐湖区","parent":"140800"},{"value":"140821","text":"临猗县","parent":"140800"},{"value":"140822","text":"万荣县","parent":"140800"},{"value":"140823","text":"闻喜县","parent":"140800"},{"value":"140824","text":"稷山县","parent":"140800"},{"value":"140825","text":"新绛县","parent":"140800"},{"value":"140826","text":"绛县","parent":"140800"},{"value":"140827","text":"垣曲县","parent":"140800"},{"value":"140828","text":"夏县","parent":"140800"},{"value":"140829","text":"平陆县","parent":"140800"},{"value":"140830","text":"芮城县","parent":"140800"},{"value":"140881","text":"永济市","parent":"140800"},{"value":"140882","text":"河津市","parent":"140800"}]},{"value":"140900","text":"忻州市","parent":"140000","children":[{"value":"140902","text":"忻府区","parent":"140900"},{"value":"140921","text":"定襄县","parent":"140900"},{"value":"140922","text":"五台县","parent":"140900"},{"value":"140923","text":"代县","parent":"140900"},{"value":"140924","text":"繁峙县","parent":"140900"},{"value":"140925","text":"宁武县","parent":"140900"},{"value":"140926","text":"静乐县","parent":"140900"},{"value":"140927","text":"神池县","parent":"140900"},{"value":"140928","text":"五寨县","parent":"140900"},{"value":"140929","text":"岢岚县","parent":"140900"},{"value":"140930","text":"河曲县","parent":"140900"},{"value":"140931","text":"保德县","parent":"140900"},{"value":"140932","text":"偏关县","parent":"140900"},{"value":"140981","text":"原平市","parent":"140900"}]},{"value":"141000","text":"临汾市","parent":"140000","children":[{"value":"141002","text":"尧都区","parent":"141000"},{"value":"141021","text":"曲沃县","parent":"141000"},{"value":"141022","text":"翼城县","parent":"141000"},{"value":"141023","text":"襄汾县","parent":"141000"},{"value":"141024","text":"洪洞县","parent":"141000"},{"value":"141025","text":"古县","parent":"141000"},{"value":"141026","text":"安泽县","parent":"141000"},{"value":"141027","text":"浮山县","parent":"141000"},{"value":"141028","text":"吉县","parent":"141000"},{"value":"141029","text":"乡宁县","parent":"141000"},{"value":"141030","text":"大宁县","parent":"141000"},{"value":"141031","text":"隰县","parent":"141000"},{"value":"141032","text":"永和县","parent":"141000"},{"value":"141033","text":"蒲县","parent":"141000"},{"value":"141034","text":"汾西县","parent":"141000"},{"value":"141081","text":"侯马市","parent":"141000"},{"value":"141082","text":"霍州市","parent":"141000"}]},{"value":"141100","text":"吕梁市","parent":"140000","children":[{"value":"141102","text":"离石区","parent":"141100"},{"value":"141121","text":"文水县","parent":"141100"},{"value":"141122","text":"交城县","parent":"141100"},{"value":"141123","text":"兴县","parent":"141100"},{"value":"141124","text":"临县","parent":"141100"},{"value":"141125","text":"柳林县","parent":"141100"},{"value":"141126","text":"石楼县","parent":"141100"},{"value":"141127","text":"岚县","parent":"141100"},{"value":"141128","text":"方山县","parent":"141100"},{"value":"141129","text":"中阳县","parent":"141100"},{"value":"141130","text":"交口县","parent":"141100"},{"value":"141181","text":"孝义市","parent":"141100"},{"value":"141182","text":"汾阳市","parent":"141100"}]}]}]}]}]
}
},
methods: {
fetchCountryData: function() {
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise(function (resolve, reject) {
return resolve([
{
text: '中国',
value: '86'
}
])
})
},
fetchRegionData: function ({ country }) {
var me = this
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise(function (resolve, reject) {
var data = []
me.treeData.some(function (v) {
if (v.value === country) {
data = v.children
return true
}
})
console.log(data)
resolve(data)
})
},
handleChange: function (e) {
this.text = e.text
this.value = e.value
},
handleClear: function (type) {
switch (type) {
case "region":
this.text.city = "";
this.text.province = "";
break;
case "country":
this.text.country = "";
break;
case "street":
this.text.street = "";
this.value.street = "";
break;
}
}
}
}
</script>
# 显示方式
显示方式
通过配置`displayType`属性，可以指定组件的显示方式
<title>显示方式</title>
<describe>通过配置`displayType`属性，可以指定组件的显示方式</describe>
<template>
<select
v-model="displayType"
style="margin-bottom: 12px"
>
<option :value="0">国家</option>
<option :value="1">国家/省/市</option>
<option :value="2">国家/省/市/街道地址</option>
<option :value="3">省/市</option>
<option :value="4">省/市/区县</option>
<option :value="5">省/市/区县/街道地址</option>
</select>
<hc-address-select
v-model="value"
:text="text"
:display-type="displayType"
:fetch-country-data="fetchCountryData"
:fetch-region-data="fetchRegionData"
@change="handleChange"
/>
</template>
<script>
export default {
data: function () {
return {
value: {},
text: {},
displayType: 2
}
},
computed: {
treeData: function () {
return [{"parent":"00","text":"中国","value":"86","children":[{"value":"110000","text":"北京市","parent":"86","children":[{"value":"110100","text":"市辖区","parent":"110000","children":[{"value":"110101","text":"东城区","parent":"110100"},{"value":"110102","text":"西城区","parent":"110100"},{"value":"110105","text":"朝阳区","parent":"110100"},{"value":"110106","text":"丰台区","parent":"110100"},{"value":"110107","text":"石景山区","parent":"110100"},{"value":"110108","text":"海淀区","parent":"110100"},{"value":"110109","text":"门头沟区","parent":"110100"},{"value":"110111","text":"房山区","parent":"110100"},{"value":"110112","text":"通州区","parent":"110100"},{"value":"110113","text":"顺义区","parent":"110100"},{"value":"110114","text":"昌平区","parent":"110100"},{"value":"110115","text":"大兴区","parent":"110100"},{"value":"110116","text":"怀柔区","parent":"110100"},{"value":"110117","text":"平谷区","parent":"110100"},{"value":"110118","text":"密云区","parent":"110100"},{"value":"110119","text":"延庆区","parent":"110100"}]},{"value":"140000","text":"山西省","parent":"86","children":[{"value":"140100","text":"太原市","parent":"140000","children":[{"value":"140105","text":"小店区","parent":"140100"},{"value":"140106","text":"迎泽区","parent":"140100"},{"value":"140107","text":"杏花岭区","parent":"140100"},{"value":"140108","text":"尖草坪区","parent":"140100"},{"value":"140109","text":"万柏林区","parent":"140100"},{"value":"140110","text":"晋源区","parent":"140100"},{"value":"140121","text":"清徐县","parent":"140100"},{"value":"140122","text":"阳曲县","parent":"140100"},{"value":"140123","text":"娄烦县","parent":"140100"},{"value":"140181","text":"古交市","parent":"140100"}]},{"value":"140200","text":"大同市","parent":"140000","children":[{"value":"140202","text":"城区","parent":"140200"},{"value":"140203","text":"矿区","parent":"140200"},{"value":"140211","text":"南郊区","parent":"140200"},{"value":"140212","text":"新荣区","parent":"140200"},{"value":"140221","text":"阳高县","parent":"140200"},{"value":"140222","text":"天镇县","parent":"140200"},{"value":"140223","text":"广灵县","parent":"140200"},{"value":"140224","text":"灵丘县","parent":"140200"},{"value":"140225","text":"浑源县","parent":"140200"},{"value":"140226","text":"左云县","parent":"140200"},{"value":"140227","text":"大同县","parent":"140200"}]},{"value":"140300","text":"阳泉市","parent":"140000","children":[{"value":"140302","text":"城区","parent":"140300"},{"value":"140303","text":"矿区","parent":"140300"},{"value":"140311","text":"郊区","parent":"140300"},{"value":"140321","text":"平定县","parent":"140300"},{"value":"140322","text":"盂县","parent":"140300"}]},{"value":"140400","text":"长治市","parent":"140000","children":[{"value":"140402","text":"城区","parent":"140400"},{"value":"140411","text":"郊区","parent":"140400"},{"value":"140421","text":"长治县","parent":"140400"},{"value":"140423","text":"襄垣县","parent":"140400"},{"value":"140424","text":"屯留县","parent":"140400"},{"value":"140425","text":"平顺县","parent":"140400"},{"value":"140426","text":"黎城县","parent":"140400"},{"value":"140427","text":"壶关县","parent":"140400"},{"value":"140428","text":"长子县","parent":"140400"},{"value":"140429","text":"武乡县","parent":"140400"},{"value":"140430","text":"沁县","parent":"140400"},{"value":"140431","text":"沁源县","parent":"140400"},{"value":"140481","text":"潞城市","parent":"140400"}]},{"value":"140500","text":"晋城市","parent":"140000","children":[{"value":"140502","text":"城区","parent":"140500"},{"value":"140521","text":"沁水县","parent":"140500"},{"value":"140522","text":"阳城县","parent":"140500"},{"value":"140524","text":"陵川县","parent":"140500"},{"value":"140525","text":"泽州县","parent":"140500"},{"value":"140581","text":"高平市","parent":"140500"}]},{"value":"140600","text":"朔州市","parent":"140000","children":[{"value":"140602","text":"朔城区","parent":"140600"},{"value":"140603","text":"平鲁区","parent":"140600"},{"value":"140621","text":"山阴县","parent":"140600"},{"value":"140622","text":"应县","parent":"140600"},{"value":"140623","text":"右玉县","parent":"140600"},{"value":"140624","text":"怀仁县","parent":"140600"}]},{"value":"140700","text":"晋中市","parent":"140000","children":[{"value":"140702","text":"榆次区","parent":"140700"},{"value":"140721","text":"榆社县","parent":"140700"},{"value":"140722","text":"左权县","parent":"140700"},{"value":"140723","text":"和顺县","parent":"140700"},{"value":"140724","text":"昔阳县","parent":"140700"},{"value":"140725","text":"寿阳县","parent":"140700"},{"value":"140726","text":"太谷县","parent":"140700"},{"value":"140727","text":"祁县","parent":"140700"},{"value":"140728","text":"平遥县","parent":"140700"},{"value":"140729","text":"灵石县","parent":"140700"},{"value":"140781","text":"介休市","parent":"140700"}]},{"value":"140800","text":"运城市","parent":"140000","children":[{"value":"140802","text":"盐湖区","parent":"140800"},{"value":"140821","text":"临猗县","parent":"140800"},{"value":"140822","text":"万荣县","parent":"140800"},{"value":"140823","text":"闻喜县","parent":"140800"},{"value":"140824","text":"稷山县","parent":"140800"},{"value":"140825","text":"新绛县","parent":"140800"},{"value":"140826","text":"绛县","parent":"140800"},{"value":"140827","text":"垣曲县","parent":"140800"},{"value":"140828","text":"夏县","parent":"140800"},{"value":"140829","text":"平陆县","parent":"140800"},{"value":"140830","text":"芮城县","parent":"140800"},{"value":"140881","text":"永济市","parent":"140800"},{"value":"140882","text":"河津市","parent":"140800"}]},{"value":"140900","text":"忻州市","parent":"140000","children":[{"value":"140902","text":"忻府区","parent":"140900"},{"value":"140921","text":"定襄县","parent":"140900"},{"value":"140922","text":"五台县","parent":"140900"},{"value":"140923","text":"代县","parent":"140900"},{"value":"140924","text":"繁峙县","parent":"140900"},{"value":"140925","text":"宁武县","parent":"140900"},{"value":"140926","text":"静乐县","parent":"140900"},{"value":"140927","text":"神池县","parent":"140900"},{"value":"140928","text":"五寨县","parent":"140900"},{"value":"140929","text":"岢岚县","parent":"140900"},{"value":"140930","text":"河曲县","parent":"140900"},{"value":"140931","text":"保德县","parent":"140900"},{"value":"140932","text":"偏关县","parent":"140900"},{"value":"140981","text":"原平市","parent":"140900"}]},{"value":"141000","text":"临汾市","parent":"140000","children":[{"value":"141002","text":"尧都区","parent":"141000"},{"value":"141021","text":"曲沃县","parent":"141000"},{"value":"141022","text":"翼城县","parent":"141000"},{"value":"141023","text":"襄汾县","parent":"141000"},{"value":"141024","text":"洪洞县","parent":"141000"},{"value":"141025","text":"古县","parent":"141000"},{"value":"141026","text":"安泽县","parent":"141000"},{"value":"141027","text":"浮山县","parent":"141000"},{"value":"141028","text":"吉县","parent":"141000"},{"value":"141029","text":"乡宁县","parent":"141000"},{"value":"141030","text":"大宁县","parent":"141000"},{"value":"141031","text":"隰县","parent":"141000"},{"value":"141032","text":"永和县","parent":"141000"},{"value":"141033","text":"蒲县","parent":"141000"},{"value":"141034","text":"汾西县","parent":"141000"},{"value":"141081","text":"侯马市","parent":"141000"},{"value":"141082","text":"霍州市","parent":"141000"}]},{"value":"141100","text":"吕梁市","parent":"140000","children":[{"value":"141102","text":"离石区","parent":"141100"},{"value":"141121","text":"文水县","parent":"141100"},{"value":"141122","text":"交城县","parent":"141100"},{"value":"141123","text":"兴县","parent":"141100"},{"value":"141124","text":"临县","parent":"141100"},{"value":"141125","text":"柳林县","parent":"141100"},{"value":"141126","text":"石楼县","parent":"141100"},{"value":"141127","text":"岚县","parent":"141100"},{"value":"141128","text":"方山县","parent":"141100"},{"value":"141129","text":"中阳县","parent":"141100"},{"value":"141130","text":"交口县","parent":"141100"},{"value":"141181","text":"孝义市","parent":"141100"},{"value":"141182","text":"汾阳市","parent":"141100"}]}]}]}]}]
}
},
methods: {
fetchCountryData: function() {
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise(function (resolve, reject) {
return resolve([
{
text: '中国',
value: '86'
}
])
})
},
fetchRegionData: function ({ country }) {
var me = this
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise(function (resolve, reject) {
var data = []
me.treeData.some(function (v) {
if (v.value === country) {
data = v.children
return true
}
})
resolve(data)
})
},
handleChange: function (e) {
this.text = e.text
this.value = e.value
}
}
}
</script>
# 属性及事件
# HcAddress 属性
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
value | 当前值，支持v-model | object | -- | -- |
display-type | 显示方式 | number | 0：国家，1：国家省市， 2：国家省市地址，3：省市， 4：省市区，5：省市区地址 | -- |
viewable | 是否查看模式 | boolean | -- | false |
disabled | 是否禁用 | boolean | -- | false |
text | 当前显示文本 | object | -- | -- |
clearable | 是否显示清除 | boolean | -- | -- |
# HcAddress-value 属性
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
country | 国家GUID | string | -- | -- |
province | 省份Guid | string | -- | -- |
city | 城市Guid | string | -- | -- |
county | 区县Guid | string | -- | -- |
street | 街道地址文本 | string | -- | -- |
# HcAddress-text 属性
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
country | 国家字符串 | string | -- | -- |
province | 省份字符串 | string | -- | -- |
city | 城市字符串 | string | -- | -- |
county | 区县字符串 | string | -- | -- |
# HcAddress 事件
| 事件名 | 说明 | 参数 |
|---|---|---|
change | 值改变时触发 | event.value: 当前选中的值集合 event.text: 当前选中的文本集合 |
clear | 值清除时触发 | string |
登录