需求是一個(gè)省市區(qū)三聯(lián)控件，先選擇省，再選擇市，最后是區(qū)，并且按首字母分類排序
如下圖：
分別選擇省市區(qū)
思路是找一個(gè)帶首字母帶全國(guó)地址json數(shù)據(jù)就搞定了，哈哈哈，但是并找不到，那么就自己創(chuàng)建一個(gè)呀！
這里用到的輔助工具庫(kù)有：1、lodash 2、pinyin
一、首先下載一個(gè)包含全國(guó)地址的json數(shù)據(jù)
傳送門：https://github.com/huangyilu/nationalAddressJSON/blob/master/address_data.json
包含全國(guó)地址的json數(shù)據(jù)
分析一下這個(gè)數(shù)據(jù)：1、沒有排序 2、沒有按首字母區(qū)分組
二、修改json數(shù)據(jù)
我們現(xiàn)在已經(jīng)有了全國(guó)的地址數(shù)據(jù)，那么可以利用漢字轉(zhuǎn)拼音取首字母的方式，對(duì)數(shù)據(jù)進(jìn)行分組并排序。
漢字轉(zhuǎn)拼音在npm上有很多，這里用的是第一個(gè)。
這個(gè)pinyin包，在iOS 9.x.x上，會(huì)出錯(cuò)，所以我們只是利用他來作為輔助工具生成我們自己的json數(shù)據(jù)
pinyin_npm.png
對(duì)數(shù)據(jù)進(jìn)行處理需要借助lodash（一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫(kù)）
分組用的是groupBy方法（https://www.lodashjs.com/docs/4.17.5.html#groupBy）
排序用的是sortBy方法（https://www.lodashjs.com/docs/4.17.5.html#sortBy）
先排序后分組，最后生成的數(shù)據(jù)：
address_final.png
json文件我都放在(https://github.com/huangyilu/nationalAddressJSON/blob/master/address_final_data.json)這里啦，需要的可以自行下載
三、根據(jù)key渲染html
最后一步，我們已經(jīng)有了分好組并排好序的數(shù)據(jù)了，那么只需要利用tabIndex控制省市區(qū)顯示順序，key值作為字母標(biāo)題即可完成。
<template>
<div class="help-address-province-item">
<div class="hap-title__icon">
<div class="back-icon" @click="bindGoBackFn"></div>
<div>選擇地址</div>
<div class="cancel-icon" @click="bindCancelFn"></div>
</div>
<div class="hap-title__item">
<div :class="['item-tit', { 'active' : tabIndex===1 }]">{{ province }}</div>
<div :class="['item-tit', { 'active' : tabIndex===2 }]" v-if="tabIndex>1">{{ city }}</div>
<div :class="['item-tit', { 'active' : tabIndex===3 }]" v-if="tabIndex>2">{{ area }}</div>
</div>
<div class="hap-title__content">
<!-- 省 -->
<div
class="content-item"
v-for="(value, key, index) in addressData"
:key="index"
v-if="tabIndex===1"
>
<div class="item__key">{{ key }}</div>
<div class="item__pro">
<div
:class="['item', { 'pro-bottom-none': proi+1 === value.length || value.length <= 1 }]"
v-for="(proItem, proi) in value"
:key="proi"
@click="bindProFn(key, proi)"
>
<div class="name">{{ proItem.name }}</div>
<div class="select-icon" v-if="proItem.name === province"></div>
</div>
</div>
</div>
<!-- 市 -->
<div
class="content-item"
v-for="(value, key, index) in cityData"
:key="index"
v-if="tabIndex===2"
>
<div class="item__key">{{ key }}</div>
<div class="item__pro">
<div
:class="['item', { 'pro-bottom-none': cityi+1 === value.length || value.length <= 1}]"
v-for="(cityItem, cityi) in value"
:key="cityi"
@click="bindCityFn(key, cityi)"
>
<div class="name">{{ cityItem.name }}</div>
<div class="select-icon" v-if="cityItem.name === city"></div>
</div>
</div>
</div>
<!-- 區(qū) -->
<div
class="content-item"
v-for="(value, key, index) in areaData"
:key="index"
v-if="tabIndex===3"
>
<div class="item__key">{{ key }}</div>
<div class="item__pro">
<div
:class="['item', { 'pro-bottom-none': areai+1 === value.length || value.length <= 1}]"
v-for="(areaItem, areai) in value"
:key="areai"
@click="bindAreaFn(key, areai)"
>
<div class="name">{{ areaItem }}</div>
<div class="select-icon" v-if="areaItem === area"></div>
</div>
</div>
</div>
</div>
<div
class="help-confm__btn"
:class="{ 'iphonex-bottom' : isIphoneX }"
@click="bindAddressConfm"
>確認(rèn)</div>
</div>
</template>
四、最終效果
address.gif
