# 地址选择 AddressSelect

在表单中收集中国的省市区地址选择组件

# 基础用法

基本用法

包括如何选择、如何触发事件

<title>基本用法</title>
<describe>包括如何选择、如何触发事件</describe>
<template>
  <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: {
        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() {
      return new Promise(function (resolve, reject) {
        return resolve([
          {
            text: '中国',
            value: '86'
          }
        ])
      })
    },
    fetchRegionData: function ({ country }) {
      var me = this
      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
    }
  },
  created(){
  }
}
</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() {
      return new Promise(function (resolve, reject) {
        return resolve([
          {
            text: '中国',
            value: '86'
          }
        ])
      })
    },
    fetchRegionData: function ({ country }) {
      var me = this
      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 -- --
displayType 显示方式 number 0:国家,1:国家省市,2:国家省市地址,3:省市,4:省市区,5:省市区地址 --
viewable 是否查看模式 boolean -- false
text 当前显示文本 object -- --

# 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: 当前选中的文本集合