vue字母划分选择城市组件（国内国际）

vue字母划分选择城市组件（国内国际）

城市按照首字母划分，归入以下几个类当中ABCDEF、GHIJ、KLMN、PQRSTUVW、XYZ。

组件有用到了el-tabs和el-tab-pane充当滑块，所以项目中要有element-plus才能够使用

数据city.json

{"ABCDEF": ["成都", "蚌埠", "北京", "酒泉", "秦皇岛", "黑河市", "白城", "安康", "巴中", "富蕴", "阿坝", "阿克苏", "阿拉善左旗", "阿勒泰", "百色", "广州", "昌都", "保山", "常州", "琼海", "新疆博乐", "福州", "长治", "朝阳", "大理", "抚远", "敦煌", "包头", "延安", "毕节", "北海", "张家界", "达县", "安顺", "长沙", "重庆", "丹东", "长春", "承德", "大庆", "二连浩特", "佛山", "常德", "额济纳旗", "鞍山", "安庆", "沧源", "迪庆香格里拉", "阜阳", "兴义", "郑州", "恩施", "鄂尔多斯", "东营", "赤峰", "大同", "大连"],"KLMN": ["连城", "陇南", "吉安", "临汾", "临沧", "阿里", "柳州", "连云港", "洛阳", "长白山", "南昌", "昆明", "扎兰屯", "德宏芒市", "南充", "拉萨", "库车", "牡丹江", "赣州", "凯里市", "南阳", "喀纳斯", "康定", "喀什", "克拉玛依", "库尔勒", "泸州", "桂林", "荔波", "伊春", "永州", "宁波", "贵阳", "宁蒗", "南京", "吕梁机场", "梅县", "林芝", "那拉提", "绵阳", "齐齐哈尔", "丽江", "临沂", "南宁", "满洲里", "南通", "六盘水", "兰州"],"PQRSTUVW": ["三明", "遵义", "沙市", "苏州", "五台山/忻州", "莎车", "若羌县", "图木舒克", "普洱", "丽水", "巫山", "阿拉善右旗", "深圳", "攀枝花", "天津", "梧州", "揭阳", "威海", "乌鲁木齐", "三亚", "日喀则", "上海", "石河子", "青岛", "温州", "天水", "唐山", "三清山机场", "通化", "日照", "无锡", "塔城", "沈阳", "武汉", "巴彦淖尔", "通辽", "铜仁", "黄山", "腾冲", "潍坊", "文山", "十堰", "邵阳", "乌海", "乌兰察布", "万州", "太原", "忻州", "武夷山", "西安", "济南", "榆林", "石家庄"],"GHIJ": ["嘉峪关", "金昌", "佳木斯", "怀化", "吉林", "景德镇", "井冈山", "祁连", "花土沟", "广汉", "甘孜", "重庆黔江", "呼和浩特", "德令哈", "佳木斯", "海拉尔", "西双版纳", "格尔木", "哈密", "邯郸", "银川", "黑河", "和田", "神农架", "九寨沟", "霍林郭勒", "呼伦贝尔", "河池", "普洱景迈", "泉州晋江", "锦州", "池州九华山", "淮安", "黎平", "固原", "台州", "九江", "果洛", "海口", "衡阳", "广元", "惠州", "舟山", "且末", "庆阳", "济宁", "衢州", "哈尔滨", "乌兰浩特", "夏河市", "杭州", "汉中", "鸡西", "合肥"],"XYZ": ["信阳", "襄阳", "岳阳", "松原", "宜宾", "西宁", "延吉", "张掖", "厦门", "运城", "徐州", "吐鲁番", "珠海", "营口", "宜春", "盐城", "烟台", "西昌", "宜昌", "中卫", "锡林浩特", "稻城", "扬州", "阿尔山", "伊宁", "义乌", "玉树", "张家口", "湛江", "昭通", "遵义"]
}

数据cityIntl.json略去部分

{"ABCDEF": ["北荷兰省", "奥克兰大区", "曼谷", "廊曼", "法兰西岛大区", "法兰西岛大区", "迪拜行政区", "迪拜行政区", "洛锡安", "黑森州", "福冈县", "剑桥郡", "加利福尼亚州", "莫斯科州", "纽约州", "清迈府", "拉齐奥大区", "拉齐奥大区", "伊利诺伊州", "北日德兰大区", "埃阿坎", "埃奥贝德", "阿布扎比行政区", "阿布扎比行政区", "亚的斯亚贝巴", "格兰坪", "阿西尔省", "阿布贾", "阿克拉", "阿楚图珀", "阿尔滕莱茵", "阿卡普尔科", "南澳大利亚", "土耳其地中海地区", "阿尔及尔", "纽约州", "艾达佛洛斯塔", "门多萨省", "安达卢西亚", "阿格蒂岛", "阿格拉", "阿瓜迪亚", "古吉拉特邦", "撒丁大区", "阿尔荷塞马", "阿赫", "阿拉木图", "布宜诺斯艾利斯", "豪尔赫纽伯里机场", "米尼斯特罗皮斯塔里尼机场", "安曼省", "密歇根州", "阿帕尔坦多", "阿帕塔基", "阿雷基帕大区", "安齐拉纳纳", "凯苏马", "亚喀巴省", "阿鲁巴", "阿尔巴门奇", "阿尔达比勒", "阿尔汉格尔斯克", "金迪奥省", "得克萨斯州", "阿提卡", "佐治亚州", "土耳其地中海地区", "旁遮普邦", "帕拉州", "北卡罗莱纳州", "宾夕法尼亚州", "普罗旺斯-阿尔卑斯-蓝色海岸", "印地安那州", "埃沃内斯"],"PQRSTUVW": ["鹿特丹", "法兰西岛大区", "东京", "兵库县", "香川县", "釜山广域市", "大伦敦", "大伦敦", "马尔马拉地区", "莫斯科州", "莫斯科州", "纽约州", "佛罗里达州", "金边", "拉齐奥大区", "仰光", "暹粒省", "素叻他尼", "乌兰巴托", "维也纳州", "万象直辖市", "威尼托大区", "威尼托大区", "新加坡", "伊利诺伊州", "保罗阿方索", "西福尔郡", "奥斯陆郡", "北开普省", "阿斯塔纳", "中央区", "中央区", "奥瓦达", "槟城州", "阿基坦-利穆赞-普瓦图-夏朗德", "北海道", "柏林州", "柏林州", "密苏里州", "巴夫洛德", "廖内省", "巴拿马省", "巴拿马省", "新罕布什尔州", "俄勒冈州", "布山加", "缅因州", "布拉格", "塔巴斯科州", "大波兰省", "伯利兹地方机场", "西米沙鄢", "胡志明市", "犹他州", "墨西哥州", "加利福尼亚州", "阿拉斯加州", "卡拉加区", "德黑兰", "加利福尼亚州", "第比利斯", "沙巴州", "大邱广域市", "丹戎槟榔", "丹绒玛尼", "坚江省", "大乌斯秋格", "大溪地", "鹿儿岛县", "东开普省", "黎逸府", "希卡尔珀尔", "罗得岛州", "宾夕法尼亚州", "新泽西州", "凡城", "佐治亚州", "亚利桑那州", "伏尔加格勒", "坚江省", "佛罗里达州", "加利福尼亚州", "加利福尼亚州", "富山县", "德岛县", "斯特拉斯克莱德", "惠灵顿大区", "马佐夫舍", "大雷克雅未克区", "大雷克雅未克区", "拉夫哈"],"XYZ": ["法兰西岛大区", "不列颠哥伦比亚省", "不列颠哥伦比亚省", "不列颠哥伦比亚省", "阿尔伯塔省", "阿派鲁克", "不列颠哥伦比亚省", "阿尔伯塔省", "不列颠哥伦比亚省", "阿尔伯塔省", "西北地区", "安大略省", "安大略省", "安大略省", "安大略省", "安大略省", "德帕斯", "苏黎世州", "鹅湾", "新不伦瑞克省", "格里斯菲奥德", "阿尔伯塔省", "各离曼", "各沃斯奈罗", "汉堡州", "不列颠哥伦比亚省", "皇后镇", "新斯科舍省", "艾兰湖/加登希尔", "阿尔伯塔省", "安大略省", "拉塔巴蒂埃耶", "老乌鸦", "麦迪兰岛", "魁北克省", "伊魁特", "因夫吉克", "魁北克省", "魁北克省", "魁北克省", "魁北克省", "内米斯奥", "不列颠哥伦比亚省", "安大略省", "牛津屋", "普分妮托", "不列颠哥伦比亚省", "皮沃那克", "祺布嘎莫", "切弗里", "恰赫巴哈尔", "奇帕维安堡市", "齐齐克塔胡亚克", "切塞西比", "切斯特菲尔德因莱特", "魁北克省", "萨思喀彻温省"],"GHIJ": ["东京羽田", "茨城县", "大阪府", "黑森州", "马尔马拉地区", "伊尔库茨克州", "基辅州", "纽约州", "普吉府", "蒙大拿州", "阿盖尔", "奥兰加巴德", "昌迪加尔", "查漠", "赤塔", "岛根县", "伊玛姆科梅尼", "北达科他州", "大特克", "大峡谷", "科罗拉多州", "复活节岛", "北部地区", "巴拉那州", "果阿", "哈博罗内", "甘巴", "甘贝拉", "甘比尔岛", "大开曼岛", "根西岛", "犹他州", "新泽西州", "北马里亚纳群岛", "广岛县", "西约塔兰省", "西约塔兰省", "日内瓦州", "戈夫", "新南威尔士", "新南威尔士", "格拉斯哥", "卡卡梅加", "朗维尤", "乔治敦", "格施姆", "戈韦诺港", "斯特拉斯克莱德", "北卡罗莱纳州", "南卡罗来纳州", "贾赞", "吉尔吉特", "盖梅纳", "戈马", "佛罗里达州", "冈尼森", "格林纳达", "格罗德诺", "利古里亚大区", "格尔夫波特(加佛港)", "瓜比", "加拉帕戈斯", "西希腊", "安达卢西亚", "密歇根州", "俄勒冈州", "格拉尼特斯", "蒙大拿州", "格鲁美地", "哥伦打洛省", "米纳斯吉拉斯州", "瓜德尔", "中央邦", "古瓦哈蒂", "塞云", "瓜亚斯省", "加济安泰普"],"KLMN": ["东京成田", "大阪府", "大伦敦", "大伦敦", "大伦敦", "大伦敦", "大伦敦", "加利福尼亚州", "加利福尼亚州", "基辅州", "莫斯科州", "国家首都区", "纽约州", "纽约州", "佛罗里达州", "甲米府", "洛坤府", "伊利诺伊州", "阿拉斯加州", "吉兰丹州", "列日", "新罕布什尔州", "西米沙鄢", "西米沙鄢", "墨西哥州", "俄亥俄州", "长崎县", "威斯康星州", "阿拉斯加州", "俄亥俄州", "戴得曼斯凯", "北莱茵-威斯特法伦州", "恩多拉", "恩菲达", "恩冈代雷", "罗纳-阿尔卑斯大区", "彭亨州", "岩手县", "宫崎县", "光州广域市", "高知县", "汉堡州", "哈巴罗夫斯克", "内华达州", "西约克郡", "大曼彻斯特", "莱比锡", "奥斯雷德涅斯洛文统计区", "拉纳卡", "林茨", "拉科鲁利亚", "列宁格勒州", "鹿儿岛县", "大雷克雅未克区", "肯塔基州", "洛美", "路易斯安那州", "维多利亚", "拉弗里亚", "拉各斯", "吉打州", "比科尔", "拉合尔", "沙巴州", "北博滕省", "利马", "西怒沙登加拉", "内布拉斯加州", "朗勃拉邦", "东约特兰省", "拉巴斯", "莱吉萨莫港", "弗吉尼亚州", "得克萨斯州", "拉罗马纳"]
}

组件代码cityChoose.vue

<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus';
import city from './city.json'
import cityIntl from './cityIntl.json'const { el } = withDefaults(defineProps<{el?: HTMLElement;
}>(), {el: undefined
})const activeSlide = ref('DOMESTIC') //DOMESTIC 国内  INTL 国际及中国港澳台
const activeTag = ref('热门')
const pos = reactive({top: 0,left: 0
})
const emit = defineEmits(['handleCityClick'])// 计算选择器弹出的窗口位置
function calc() {if (el) {pos.top = el.getBoundingClientRect().height + el.offsetTop + 6 // 6额外偏移pos.left = el.offsetLeft} else {console.warn('请传入el元素,用于计算窗口弹出位置');}
}const handleClick = (tab: TabsPaneContext, event: Event) => {
}function toggleSlide(slideName: string) {activeSlide.value = slideName// queryflightCityList()if(slideName === 'DOMESTIC'){handleCityMap.value = city}else{handleCityMap.value = cityIntl}
}const handleCityMap = ref<{ [key: string]: any }>({})function handleCityClick(cityName: string) {emit('handleCityClick', cityName)
}onMounted(() => {calc();handleCityMap.value = city
})
</script><template><div class="city_choose_wrap" :style="{ top: pos.top + 'px', left: pos.left + 'px' }"><div class="choose_left"><p class="left_item" :class="activeSlide === 'DOMESTIC' ? 'slide_active' : ''" @click="toggleSlide('DOMESTIC')">国内</p><p class="left_item" :class="activeSlide === 'INTL' ? 'slide_active' : ''" @click="toggleSlide('INTL')">国际及中国港澳台</p></div><div class="choose_right"><el-tabs v-model="activeTag" class="demo-tabs" @tab-click="handleClick"><el-tab-pane label="热门" name="热门"><div class="city_name"><p v-for="item in handleCityMap['热门']" @click="handleCityClick(item)">{{ item }}</p></div></el-tab-pane><el-tab-pane label="ABCDEF" name="ABCDEF"><div class="city_name"><p v-for="item in handleCityMap['ABCDEF']" @click="handleCityClick(item)">{{ item }}</p></div></el-tab-pane><el-tab-pane label="GHIJ" name="GHIJ"><div class="city_name"><p v-for="item in handleCityMap['GHIJ']" @click="handleCityClick(item)">{{ item }}</p></div></el-tab-pane><el-tab-pane label="KLMN" name="KLMN"><div class="city_name"><p v-for="item in handleCityMap['KLMN']" @click="handleCityClick(item)">{{ item }}</p></div></el-tab-pane><el-tab-pane label="PQRSTUVW" name="PQRSTUVW"><div class="city_name"><p v-for="item in handleCityMap['PQRSTUVW']" @click="handleCityClick(item)">{{ item }}</p></div></el-tab-pane><el-tab-pane label="XYZ" name="XYZ"><div class="city_name"><p v-for="item in handleCityMap['XYZ']" @click="handleCityClick(item)">{{ item }}</p></div></el-tab-pane></el-tabs></div></div>
</template><style scoped>
.city_choose_wrap {position: absolute;background: #fff;box-shadow: 0px 0px 12px #ccc;border-radius: 8px;overflow: hidden;display: flex;height: 250px;width: 690px;.choose_left {background: #F5F5F5;padding: 8px 12px;.left_item {width: 112px;padding: 4px 12px;border-radius: 4px;/* transition: all .1s; */margin-bottom: 8px;cursor: pointer;/* &:hover {background: #3D6CFE;color: #fff;} */}}.choose_right {background: #fff;padding: 4px 12px;height: full;overflow-y: auto;.city_name {display: flex;flex-wrap: wrap;p {width: 120px;min-height: 32px;cursor: pointer;&:hover {color: #3D6CFE;text-decoration: underline;}}}}.slide_active {background: #3D6CFE;color: #fff;}
}
</style>

使用方式

父组件控制是否显示，el传入HTML元素，此选择器会在el下面打开

<CityChoose v-if="show" :el="curChooseRef" @handleCityClick="handleChildrenCityClick" />

function handleChildrenCityClick(cityName: string) {console.log(cityName); // 父类中获取点击的城市名称
}

效果图

——————————————分割线

2024-12-19更新

下面的组件对ABCDEF、GHIJ、KLMN、PQRSTUVW、XYZ进行二次划分，更美观且更方便查找。

例如ABCDEF划分为——A、B、C、D、E、F

数据有所不同

数据city.json

[{ "cityName": "成都", "pinYin": "cheng du" }, { "cityName": "蚌埠", "pinYin": "beng bu" }, { "cityName": "北京", "pinYin": "bei jing" }, { "cityName": "酒泉", "pinYin": "jiu quan" }, { "cityName": "秦皇岛", "pinYin": "qin huang dao" }, { "cityName": "黑河市", "pinYin": "hei he shi" }, { "cityName": "白城", "pinYin": "bai cheng" }, { "cityName": "安康", "pinYin": "an kang" }, { "cityName": "巴中", "pinYin": "ba zhong" }, { "cityName": "富蕴", "pinYin": "fu yun" }, { "cityName": "阿坝", "pinYin": "a ba" }, { "cityName": "阿克苏", "pinYin": "a ke su" }, { "cityName": "阿拉善左旗", "pinYin": "a la shan zuo qi" },{ "cityName": "阿勒泰", "pinYin": "a le tai" }, { "cityName": "百色", "pinYin": "bai se" }, { "cityName": "广州", "pinYin": "guang zhou" }, { "cityName": "昌都", "pinYin": "chang dou" }, { "cityName": "保山", "pinYin": "bao shan" }, { "cityName": "常州", "pinYin": "chang zhou" }, { "cityName": "琼海", "pinYin": "qiong hai" }, { "cityName": "新疆博乐", "pinYin": "xin jiang bo le" }, { "cityName": "福州", "pinYin": "fu zhou" }, { "cityName": "长治", "pinYin": "chang zhi" }, { "cityName": "朝阳", "pinYin": "chao yang" }, { "cityName": "大理", "pinYin": "da li" },{ "cityName": "抚远", "pinYin": "fu yuan" }, { "cityName": "敦煌", "pinYin": "dun huang" }, { "cityName": "包头", "pinYin": "bao tou" }, { "cityName": "延安", "pinYin": "yan an" }, { "cityName": "毕节", "pinYin": "bi jie" }, { "cityName": "北海", "pinYin": "bei hai" }, { "cityName": "张家界", "pinYin": "zhang jia jie" }, { "cityName": "达县", "pinYin": "da xian" }, { "cityName": "安顺", "pinYin": "an shun" }, { "cityName": "长沙", "pinYin": "chang sha" }, { "cityName": "重庆", "pinYin": "chong qing" }, { "cityName": "丹东", "pinYin": "dan dong" },{ "cityName": "长春", "pinYin": "chang chun" }, { "cityName": "承德", "pinYin": "cheng de" }, { "cityName": "大庆", "pinYin": "da qing" }, { "cityName": "二连浩特", "pinYin": "er lian hao te" }, { "cityName": "佛山", "pinYin": "fo shan" }, { "cityName": "常德", "pinYin": "chang de" }, { "cityName": "额济纳旗", "pinYin": "e ji na qi" }, { "cityName": "鞍山", "pinYin": "an shan" }, { "cityName": "安庆", "pinYin": "an qing" }, { "cityName": "沧源", "pinYin": "cang yuan" }, { "cityName": "迪庆香格里拉", "pinYin": "di qing xiang ge li la" }, { "cityName": "阜阳", "pinYin": "fu yang" },{ "cityName": "兴义", "pinYin": "xing yi" }, { "cityName": "郑州", "pinYin": "zheng zhou" }, { "cityName": "恩施", "pinYin": "en shi" }, { "cityName": "鄂尔多斯", "pinYin": "e er duo si" }, { "cityName": "东营", "pinYin": "dong ying" }, { "cityName": "赤峰", "pinYin": "chi feng" }, { "cityName": "大同", "pinYin": "da tong" }, { "cityName": "大连", "pinYin": "da lian" }, { "cityName": "连城", "pinYin": "lian cheng" }, { "cityName": "陇南", "pinYin": "long nan" }, { "cityName": "吉安", "pinYin": "ji an" },{ "cityName": "临汾", "pinYin": "lin fen" }, { "cityName": "临沧", "pinYin": "lin cang" }, { "cityName": "阿里", "pinYin": "a li" }, { "cityName": "柳州", "pinYin": "liu zhou" }, { "cityName": "连云港", "pinYin": "lian yun gang" }, { "cityName": "洛阳", "pinYin": "luo yang" }, { "cityName": "长白山", "pinYin": "chang bai shan" }, { "cityName": "南昌", "pinYin": "nan chang" }, { "cityName": "昆明", "pinYin": "kun ming" }, { "cityName": "扎兰屯", "pinYin": "zha lan tun" }, { "cityName": "德宏芒市", "pinYin": "de hong mang shi" }, { "cityName": "南充", "pinYin": "nan chong" }, { "cityName": "拉萨", "pinYin": "la sa" }, { "cityName": "库车", "pinYin": "ku che" }, { "cityName": "牡丹江", "pinYin": "mu dan jiang" }, { "cityName": "赣州", "pinYin": "gan zhou" }, { "cityName": "凯里市", "pinYin": "kai li shi" }, { "cityName": "南阳", "pinYin": "nan yang" }, { "cityName": "喀纳斯", "pinYin": "ka na si" }, { "cityName": "康定", "pinYin": "kang ding" }, { "cityName": "喀什", "pinYin": "ka shen" }, { "cityName": "克拉玛依", "pinYin": "ke la ma yi" }, { "cityName": "库尔勒", "pinYin": "ku er le" }, { "cityName": "泸州", "pinYin": "lu zhou" }, { "cityName": "桂林", "pinYin": "gui lin" }, { "cityName": "荔波", "pinYin": "li bo" }, { "cityName": "伊春", "pinYin": "yi chun" }, { "cityName": "永州", "pinYin": "yong zhou" }, { "cityName": "宁波", "pinYin": "ning bo" }, { "cityName": "贵阳", "pinYin": "gui yang" }, { "cityName": "宁蒗", "pinYin": "ning lang" }, { "cityName": "南京", "pinYin": "nan jing" }, { "cityName": "吕梁机场", "pinYin": "lü liang ji chang" }, { "cityName": "梅县", "pinYin": "mei xian" }, { "cityName": "林芝", "pinYin": "lin zhi" }, { "cityName": "那拉提", "pinYin": "na la ti" }, { "cityName": "绵阳", "pinYin": "mian yang" }, { "cityName": "齐齐哈尔", "pinYin": "qi qi ha er" }, { "cityName": "丽江", "pinYin": "li jiang" }, { "cityName": "临沂", "pinYin": "lin yi" }, { "cityName": "南宁", "pinYin": "nan ning" }, { "cityName": "满洲里", "pinYin": "man zhou li" }, { "cityName": "南通", "pinYin": "nan tong" }, { "cityName": "六盘水", "pinYin": "liu pan shui" }, { "cityName": "兰州", "pinYin": "lan zhou" }, { "cityName": "三明", "pinYin": "san ming" }, { "cityName": "遵义", "pinYin": "zun yi" }, { "cityName": "沙市", "pinYin": "sha shi" }, { "cityName": "苏州", "pinYin": "su zhou" }, { "cityName": "五台山/忻州", "pinYin": "wu tai shan / xin zhou" }, { "cityName": "莎车", "pinYin": "sha che" }, { "cityName": "若羌县", "pinYin": "ruo qiang xian" }, { "cityName": "图木舒克", "pinYin": "tu mu shu ke" }, { "cityName": "普洱", "pinYin": "pu er" }, { "cityName": "丽水", "pinYin": "li shui" }, { "cityName": "巫山", "pinYin": "wu shan" }, { "cityName": "阿拉善右旗", "pinYin": "a la shan you qi" },{ "cityName": "深圳", "pinYin": "shen zhen" }, { "cityName": "攀枝花", "pinYin": "pan zhi hua" }, { "cityName": "天津", "pinYin": "tian jin" }, { "cityName": "梧州", "pinYin": "wu zhou" }, { "cityName": "揭阳", "pinYin": "jie yang" }, { "cityName": "威海", "pinYin": "wei hai" }, { "cityName": "乌鲁木齐", "pinYin": "wu lu mu qi" }, { "cityName": "三亚", "pinYin": "san ya" }, { "cityName": "日喀则", "pinYin": "ri ka ze" }, { "cityName": "上海", "pinYin": "shang hai" }, { "cityName": "石河子", "pinYin": "shi he zi" }, { "cityName": "青岛", "pinYin": "qing dao" }, { "cityName": "温州", "pinYin": "wen zhou" }, { "cityName": "天水", "pinYin": "tian shui" }, { "cityName": "唐山", "pinYin": "tang shan" }, { "cityName": "三清山机场", "pinYin": "san qing shan ji chang" }, { "cityName": "通化", "pinYin": "tong hua" }, { "cityName": "日照", "pinYin": "ri zhao" }, { "cityName": "无锡", "pinYin": "wu xi" }, { "cityName": "塔城", "pinYin": "ta cheng" }, { "cityName": "沈阳", "pinYin": "shen yang" }, { "cityName": "武汉", "pinYin": "wu han" }, { "cityName": "巴彦淖尔", "pinYin": "ba yan nao er" }, { "cityName": "通辽", "pinYin": "tong liao" }, { "cityName": "铜仁", "pinYin": "tong ren" }, { "cityName": "黄山", "pinYin": "huang shan" }, { "cityName": "腾冲", "pinYin": "teng chong" }, { "cityName": "潍坊", "pinYin": "wei fang" }, { "cityName": "文山", "pinYin": "wen shan" }, { "cityName": "十堰", "pinYin": "shi yan" }, { "cityName": "邵阳", "pinYin": "shao yang" }, { "cityName": "乌海", "pinYin": "wu hai" }, { "cityName": "乌兰察布", "pinYin": "wu lan cha bu" }, { "cityName": "万州", "pinYin": "wan zhou" }, { "cityName": "太原", "pinYin": "tai yuan" }, { "cityName": "忻州", "pinYin": "xin zhou" }, { "cityName": "武夷山", "pinYin": "wu yi shan" }, { "cityName": "西安", "pinYin": "xi an" }, { "cityName": "济南", "pinYin": "ji nan" }, { "cityName": "榆林", "pinYin": "yu lin" }, { "cityName": "石家庄", "pinYin": "shi jia zhuang" }, { "cityName": "嘉峪关", "pinYin": "jia yu guan" }, { "cityName": "金昌", "pinYin": "jin chang" }, { "cityName": "佳木斯", "pinYin": "jia mu si" }, { "cityName": "怀化", "pinYin": "huai hua" }, { "cityName": "吉林", "pinYin": "ji lin" }, { "cityName": "景德镇", "pinYin": "jing de zhen" }, { "cityName": "井冈山", "pinYin": "jing gang shan" }, { "cityName": "祁连", "pinYin": "qi lian" }, { "cityName": "花土沟", "pinYin": "hua tu gou" }, { "cityName": "广汉", "pinYin": "guang han" }, { "cityName": "甘孜", "pinYin": "gan zi" }, { "cityName": "重庆黔江", "pinYin": "chong qing qian jiang" }, { "cityName": "呼和浩特", "pinYin": "hu he hao te" }, { "cityName": "德令哈", "pinYin": "de ling ha" }, { "cityName": "佳木斯", "pinYin": "jia mu si" }, { "cityName": "海拉尔", "pinYin": "hai la er" }, { "cityName": "西双版纳", "pinYin": "xi shuang ban na" }, { "cityName": "格尔木", "pinYin": "ge er mu" }, { "cityName": "哈密", "pinYin": "ha mi" }, { "cityName": "邯郸", "pinYin": "han dan" }, { "cityName": "银川", "pinYin": "yin chuan" }, { "cityName": "黑河", "pinYin": "hei he" }, { "cityName": "和田", "pinYin": "he tian" }, { "cityName": "神农架", "pinYin": "shen nong jia" }, { "cityName": "九寨沟", "pinYin": "jiu zhai gou" }, { "cityName": "霍林郭勒", "pinYin": "huo lin guo le" }, { "cityName": "呼伦贝尔", "pinYin": "hu lun bei er" }, { "cityName": "河池", "pinYin": "he chi" }, { "cityName": "普洱景迈", "pinYin": "pu er jing mai" }, { "cityName": "泉州晋江", "pinYin": "quan zhou jin jiang" }, { "cityName": "锦州", "pinYin": "jin zhou" }, { "cityName": "池州九华山", "pinYin": "chi zhou jiu hua shan" }, { "cityName": "淮安", "pinYin": "huai an" }, { "cityName": "黎平", "pinYin": "li ping" }, { "cityName": "固原", "pinYin": "gu yuan" }, { "cityName": "台州", "pinYin": "tai zhou" }, { "cityName": "九江", "pinYin": "jiu jiang" }, { "cityName": "果洛", "pinYin": "guo luo" }, { "cityName": "海口", "pinYin": "hai kou" }, { "cityName": "衡阳", "pinYin": "heng yang" }, { "cityName": "广元", "pinYin": "guang yuan" }, { "cityName": "惠州", "pinYin": "hui zhou" }, { "cityName": "舟山", "pinYin": "zhou shan" }, { "cityName": "且末", "pinYin": "qie mo" }, { "cityName": "庆阳", "pinYin": "qing yang" }, { "cityName": "济宁", "pinYin": "ji ning" }, { "cityName": "衢州", "pinYin": "qu zhou" }, { "cityName": "哈尔滨", "pinYin": "ha er bin" }, { "cityName": "乌兰浩特", "pinYin": "wu lan hao te" }, { "cityName": "夏河市", "pinYin": "xia he shi" }, { "cityName": "杭州", "pinYin": "hang zhou" }, { "cityName": "汉中", "pinYin": "han zhong" }, { "cityName": "鸡西", "pinYin": "ji xi" }, { "cityName": "合肥", "pinYin": "he fei" }, { "cityName": "信阳", "pinYin": "xin yang" }, { "cityName": "襄阳", "pinYin": "xiang yang" }, { "cityName": "岳阳", "pinYin": "yue yang" }, { "cityName": "松原", "pinYin": "song yuan" },{ "cityName": "宜宾", "pinYin": "yi bin" }, { "cityName": "西宁", "pinYin": "xi ning" }, { "cityName": "延吉", "pinYin": "yan ji" }, { "cityName": "张掖", "pinYin": "zhang ye" }, { "cityName": "厦门", "pinYin": "xia men" }, { "cityName": "运城", "pinYin": "yun cheng" }, { "cityName": "徐州", "pinYin": "xu zhou" }, { "cityName": "吐鲁番", "pinYin": "tu lu fan" }, { "cityName": "珠海", "pinYin": "zhu hai" }, { "cityName": "营口", "pinYin": "ying kou" }, { "cityName": "宜春", "pinYin": "yi chun" }, { "cityName": "盐城", "pinYin": "yan cheng" }, { "cityName": "烟台", "pinYin": "yan tai" }, { "cityName": "西昌", "pinYin": "xi chang" }, { "cityName": "宜昌", "pinYin": "yi chang" }, { "cityName": "中卫", "pinYin": "zhong wei" }, { "cityName": "锡林浩特", "pinYin": "xi lin hao te" }, { "cityName": "稻城", "pinYin": "dao cheng" }, { "cityName": "扬州", "pinYin": "yang zhou" }, { "cityName": "阿尔山", "pinYin": "a er shan" }, { "cityName": "伊宁", "pinYin": "yi ning" }, { "cityName": "义乌", "pinYin": "yi wu" }, { "cityName": "玉树", "pinYin": "yu shu" }, { "cityName": "张家口", "pinYin": "zhang jia kou" }, { "cityName": "湛江", "pinYin": "zhan jiang" }, { "cityName": "昭通", "pinYin": "zhao tong" }, { "cityName": "遵义", "pinYin": "zun yi" }
]

数据cityIntl.json略去部分

[{ "cityName": "北荷兰省", "pinYin": "bei he lan sheng" }, { "cityName": "奥克兰大区", "pinYin": "ao ke lan da qu" }, { "cityName": "曼谷", "pinYin": "man gu" }, { "cityName": "廊曼", "pinYin": "lang man" }, { "cityName": "法兰西岛大区", "pinYin": "fa lan xi dao da qu" }, { "cityName": "法兰西岛大区", "pinYin": "fa lan xi dao da qu" }, { "cityName": "迪拜行政区", "pinYin": "di bai xing zheng qu" }, { "cityName": "迪拜行政区", "pinYin": "di bai xing zheng qu" }, { "cityName": "洛锡安", "pinYin": "luo xi an" }, { "cityName": "黑森州", "pinYin": "hei sen zhou" }, { "cityName": "福冈县", "pinYin": "fu gang xian" }, { "cityName": "剑桥郡", "pinYin": "jian qiao jun" }, { "cityName": "加利福尼亚州", "pinYin": "jia li fu ni ya zhou" }, { "cityName": "莫斯科州", "pinYin": "mo si ke zhou" }, { "cityName": "纽约州", "pinYin": "niu yue zhou" }, { "cityName": "清迈府", "pinYin": "qing mai fu" }, { "cityName": "拉齐奥大区", "pinYin": "la qi ao da qu" }, { "cityName": "拉齐奥大区", "pinYin": "la qi ao da qu" }, { "cityName": "伊利诺伊州", "pinYin": "yi li nuo yi zhou" }, { "cityName": "北日德兰大区", "pinYin": "bei ri de lan da qu" }, { "cityName": "埃阿坎", "pinYin": "ai a kan" }, { "cityName": "埃奥贝德", "pinYin": "ai ao bei de" }, { "cityName": "阿布扎比行政区", "pinYin": "a bu zha bi xing zheng qu" }, { "cityName": "阿布扎比行政区", "pinYin": "a bu zha bi xing zheng qu" },{ "cityName": "亚的斯亚贝巴", "pinYin": "ya de si ya bei ba" }, { "cityName": "格兰坪", "pinYin": "ge lan ping" }, { "cityName": "阿西尔省", "pinYin": "a xi er sheng" }, { "cityName": "阿布贾", "pinYin": "a bu jia" }, { "cityName": "阿克拉", "pinYin": "a ke la" }, { "cityName": "阿楚图珀", "pinYin": "a chu tu po" }, { "cityName": "阿尔滕莱茵", "pinYin": "a er teng lai yin" }, { "cityName": "阿卡普尔科", "pinYin": "a ka pu er ke" }, { "cityName": "南澳大利亚", "pinYin": "nan ao da li ya" }, { "cityName": "土耳其地中海地区", "pinYin": "tu er qi di zhong hai di qu" }, { "cityName": "阿尔及尔", "pinYin": "a er ji er" }, { "cityName": "纽约州", "pinYin": "niu yue zhou" }, { "cityName": "艾达佛洛斯塔", "pinYin": "ai da fo luo si ta" }, { "cityName": "门多萨省", "pinYin": "men duo sa sheng" }, { "cityName": "安达卢西亚", "pinYin": "an da lu xi ya" }, { "cityName": "阿格蒂岛", "pinYin": "a ge di dao" }, { "cityName": "阿格拉", "pinYin": "a ge la" }, { "cityName": "阿瓜迪亚", "pinYin": "a gua di ya" }, { "cityName": "古吉拉特邦", "pinYin": "gu ji la te bang" }, { "cityName": "撒丁大区", "pinYin": "sa ding da qu" }, { "cityName": "阿尔荷塞马", "pinYin": "a er he sai ma" }, { "cityName": "阿赫", "pinYin": "a he" }, { "cityName": "阿拉木图", "pinYin": "a la mu tu" }, { "cityName": "布宜诺斯艾利斯", "pinYin": "bu yi nuo si ai li si" }, { "cityName": "豪尔赫纽伯里机场", "pinYin": "hao er he niu bo li ji chang" }, { "cityName": "米尼斯特罗皮斯塔里尼机场", "pinYin": "mi ni si te luo pi si ta li ni ji chang" }, { "cityName": "安曼省", "pinYin": "an man sheng" }, { "cityName": "密歇根州", "pinYin": "mi xie gen zhou" }, { "cityName": "阿帕尔坦多", "pinYin": "a pa er tan duo" }, { "cityName": "阿帕塔基", "pinYin": "a pa ta ji" }, { "cityName": "阿雷基帕大区", "pinYin": "a lei ji pa da qu" }, { "cityName": "安齐拉纳纳", "pinYin": "an qi la na na" }, { "cityName": "凯苏马", "pinYin": "kai su ma" }, { "cityName": "亚喀巴省", "pinYin": "ya ka ba sheng" }, { "cityName": "阿鲁巴", "pinYin": "a lu ba" }, { "cityName": "阿尔巴门奇", "pinYin": "a er ba men qi" }, { "cityName": "阿尔达比勒", "pinYin": "a er da bi le" }, { "cityName": "阿尔汉格尔斯克", "pinYin": "a er han ge er si ke" }, { "cityName": "金迪奥省", "pinYin": "jin di ao sheng" }, { "cityName": "得克萨斯州", "pinYin": "de ke sa si zhou" }, { "cityName": "阿提卡", "pinYin": "a ti ka" }, { "cityName": "佐治亚州", "pinYin": "zuo zhi ya zhou" }, { "cityName": "土耳其地中海地区", "pinYin": "tu er qi di zhong hai di qu" }, { "cityName": "旁遮普邦", "pinYin": "pang zhe pu bang" }, { "cityName": "帕拉州", "pinYin": "pa la zhou" }, { "cityName": "北卡罗莱纳州", "pinYin": "bei ka luo lai na zhou" }, { "cityName": "宾夕法尼亚州", "pinYin": "bin xi fa ni ya zhou" }, { "cityName": "普罗旺斯-阿尔卑斯-蓝色海岸", "pinYin": "pu luo wang si - a er bei si - lan se hai an" }, { "cityName": "印地安那州", "pinYin": "yin di an na zhou" }, { "cityName": "埃沃内斯", "pinYin": "ai wo nei si" }, { "cityName": "鹿特丹", "pinYin": "lu te dan" }, { "cityName": "法兰西岛大区", "pinYin": "fa lan xi dao da qu" }, { "cityName": "东京", "pinYin": "dong jing" }, { "cityName": "兵库县", "pinYin": "bing ku xian" }, { "cityName": "香川县", "pinYin": "xiang chuan xian" }, { "cityName": "釜山广域市", "pinYin": "fu shan guang yu shi" }, { "cityName": "大伦敦", "pinYin": "da lun dun" }, { "cityName": "大伦敦", "pinYin": "da lun dun" }, { "cityName": "马尔马拉地区", "pinYin": "ma er ma la di qu" }, { "cityName": "莫斯科州", "pinYin": "mo si ke zhou" }, { "cityName": "莫斯科州", "pinYin": "mo si ke zhou" }, { "cityName": "纽约州", "pinYin": "niu yue zhou" }, { "cityName": "佛罗里达州", "pinYin": "fo luo li da zhou" },{ "cityName": "金边", "pinYin": "jin bian" }, { "cityName": "拉齐奥大区", "pinYin": "la qi ao da qu" }, { "cityName": "仰光", "pinYin": "yang guang" }, { "cityName": "暹粒省", "pinYin": "xian li sheng" }, { "cityName": "素叻他尼", "pinYin": "su le ta ni" }, { "cityName": "乌兰巴托", "pinYin": "wu lan ba tuo" }, { "cityName": "维也纳州", "pinYin": "wei ye na zhou" }, { "cityName": "万象直辖市", "pinYin": "wan xiang zhi xia shi" }, { "cityName": "威尼托大区", "pinYin": "wei ni tuo da qu" }, { "cityName": "威尼托大区", "pinYin": "wei ni tuo da qu" }, { "cityName": "新加坡", "pinYin": "xin jia po" }, { "cityName": "伊利诺伊州", "pinYin": "yi li nuo yi zhou" }, { "cityName": "保罗阿方索", "pinYin": "bao luo a fang suo" }, { "cityName": "西福尔郡", "pinYin": "xi fu er jun" }, { "cityName": "奥斯陆郡", "pinYin": "ao si lu jun" }, { "cityName": "北开普省", "pinYin": "bei kai pu sheng" }, { "cityName": "阿斯塔纳", "pinYin": "a si ta na" }, { "cityName": "中央区", "pinYin": "zhong yang qu" }, { "cityName": "中央区", "pinYin": "zhong yang qu" }, { "cityName": "奥瓦达", "pinYin": "ao wa da" }, { "cityName": "槟城州", "pinYin": "bin cheng zhou" }, { "cityName": "阿基坦-利穆赞-普瓦图-夏朗德", "pinYin": "a ji tan - li mu zan - pu wa tu - xia lang de" }, { "cityName": "北海道", "pinYin": "bei hai dao" }, { "cityName": "柏林州", "pinYin": "bo lin zhou" }, { "cityName": "柏林州", "pinYin": "bo lin zhou" }, { "cityName": "密苏里州", "pinYin": "mi su li zhou" }, { "cityName": "巴夫洛德", "pinYin": "ba fu luo de" }, { "cityName": "廖内省", "pinYin": "liao nei xing" }, { "cityName": "巴拿马省", "pinYin": "ba na ma sheng" }, { "cityName": "巴拿马省", "pinYin": "ba na ma sheng" }, { "cityName": "新罕布什尔州", "pinYin": "xin han bu shen er zhou" }, { "cityName": "俄勒冈州", "pinYin": "e le gang zhou" }, { "cityName": "布山加", "pinYin": "bu shan jia" }, { "cityName": "缅因州", "pinYin": "mian yin zhou" }, { "cityName": "布拉格", "pinYin": "bu la ge" }, { "cityName": "塔巴斯科州", "pinYin": "ta ba si ke zhou" }, { "cityName": "大波兰省", "pinYin": "da bo lan sheng" }, { "cityName": "伯利兹地方机场", "pinYin": "bo li zi di fang ji chang" }, { "cityName": "西米沙鄢", "pinYin": "xi mi sha yan" }, { "cityName": "胡志明市", "pinYin": "hu zhi ming shi" }, { "cityName": "犹他州", "pinYin": "you ta zhou" }, { "cityName": "墨西哥州", "pinYin": "mo xi ge zhou" }, { "cityName": "加利福尼亚州", "pinYin": "jia li fu ni ya zhou" }, { "cityName": "阿拉斯加州", "pinYin": "a la si jia zhou" }, { "cityName": "卡拉加区", "pinYin": "ka la jia qu" }, { "cityName": "德黑兰", "pinYin": "de hei lan" }, { "cityName": "加利福尼亚州", "pinYin": "jia li fu ni ya zhou" }, { "cityName": "第比利斯", "pinYin": "di bi li si" }, { "cityName": "沙巴州", "pinYin": "sha ba zhou" }, { "cityName": "大邱广域市", "pinYin": "da qiu guang yu shi" }, { "cityName": "丹戎槟榔", "pinYin": "dan rong bin lang" }, { "cityName": "丹绒玛尼", "pinYin": "dan rong ma ni" }, { "cityName": "坚江省", "pinYin": "jian jiang sheng" }, { "cityName": "大乌斯秋格", "pinYin": "da wu si qiu ge" }, { "cityName": "大溪地", "pinYin": "da xi di" }, { "cityName": "鹿儿岛县", "pinYin": "lu er dao xian" }, { "cityName": "东开普省", "pinYin": "dong kai pu sheng" }, { "cityName": "黎逸府", "pinYin": "li yi fu" }, { "cityName": "希卡尔珀尔", "pinYin": "xi ka er po er" }, { "cityName": "罗得岛州", "pinYin": "luo de dao zhou" }, { "cityName": "宾夕法尼亚州", "pinYin": "bin xi fa ni ya zhou" }, { "cityName": "新泽西州", "pinYin": "xin ze xi zhou" }, { "cityName": "凡城", "pinYin": "fan cheng" }, { "cityName": "佐治亚州", "pinYin": "zuo zhi ya zhou" }, { "cityName": "亚利桑那州", "pinYin": "ya li sang na zhou" }, { "cityName": "伏尔加格勒", "pinYin": "fu er jia ge le" }, { "cityName": "坚江省", "pinYin": "jian jiang sheng" },{ "cityName": "佛罗里达州", "pinYin": "fo luo li da zhou" }, { "cityName": "加利福尼亚州", "pinYin": "jia li fu ni ya zhou" }, { "cityName": "加利福尼亚州", "pinYin": "jia li fu ni ya zhou" }, { "cityName": "富山县", "pinYin": "fu shan xian" }, { "cityName": "德岛县", "pinYin": "de dao xian" }, { "cityName": "斯特拉斯克莱德", "pinYin": "si te la si ke lai de" }, { "cityName": "惠灵顿大区", "pinYin": "hui ling dun da qu" }, { "cityName": "马佐夫舍", "pinYin": "ma zuo fu she" }, { "cityName": "大雷克雅未克区", "pinYin": "da lei ke ya wei ke qu" }, { "cityName": "大雷克雅未克区", "pinYin": "da lei ke ya wei ke qu" }, { "cityName": "拉夫哈", "pinYin": "la fu ha" }, { "cityName": "法兰西岛大区", "pinYin": "fa lan xi dao da qu" }, { "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "阿尔伯塔省", "pinYin": "a er bo ta sheng" }, { "cityName": "阿派鲁克", "pinYin": "a pai lu ke" }, { "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "阿尔伯塔省", "pinYin": "a er bo ta sheng" }, { "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "阿尔伯塔省", "pinYin": "a er bo ta sheng" }, { "cityName": "西北地区", "pinYin": "xi bei di qu" }, { "cityName": "安大略省", "pinYin": "an da lüe sheng" }, { "cityName": "安大略省", "pinYin": "an da lüe sheng" }, { "cityName": "安大略省", "pinYin": "an da lüe sheng" }, { "cityName": "安大略省", "pinYin": "an da lüe sheng" }, { "cityName": "安大略省", "pinYin": "an da lüe sheng" }, { "cityName": "德帕斯", "pinYin": "de pa si" }, { "cityName": "苏黎世州", "pinYin": "su li shi zhou" }, { "cityName": "鹅湾", "pinYin": "e wan" }, { "cityName": "新不伦瑞克省", "pinYin": "xin bu lun rui ke sheng" }, { "cityName": "格里斯菲奥德", "pinYin": "ge li si fei ao de" }, { "cityName": "阿尔伯塔省", "pinYin": "a er bo ta sheng" }, { "cityName": "各离曼", "pinYin": "ge li man" }, { "cityName": "各沃斯奈罗", "pinYin": "ge wo si nai luo" }, { "cityName": "汉堡州", "pinYin": "han bao zhou" }, { "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "皇后镇", "pinYin": "huang hou zhen" }, { "cityName": "新斯科舍省", "pinYin": "xin si ke she sheng" }, { "cityName": "艾兰湖/加登希尔", "pinYin": "ai lan hu / jia deng xi er" }, { "cityName": "阿尔伯塔省", "pinYin": "a er bo ta sheng" }, { "cityName": "安大略省", "pinYin": "an da lüe sheng" }, { "cityName": "拉塔巴蒂埃耶", "pinYin": "la ta ba di ai ye" }, { "cityName": "老乌鸦", "pinYin": "lao wu ya" }, { "cityName": "麦迪兰岛", "pinYin": "mai di lan dao" }, { "cityName": "魁北克省", "pinYin": "kui bei ke sheng" }, { "cityName": "伊魁特", "pinYin": "yi kui te" }, { "cityName": "因夫吉克", "pinYin": "yin fu ji ke" }, { "cityName": "魁北克省", "pinYin": "kui bei ke sheng" }, { "cityName": "魁北克省", "pinYin": "kui bei ke sheng" }, { "cityName": "魁北克省", "pinYin": "kui bei ke sheng" }, { "cityName": "魁北克省", "pinYin": "kui bei ke sheng" }, { "cityName": "内米斯奥", "pinYin": "nei mi si ao" }, { "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "安大略省", "pinYin": "an da lüe sheng" }, { "cityName": "牛津屋", "pinYin": "niu jin wu" }, { "cityName": "普分妮托", "pinYin": "pu fen ni tuo" },{ "cityName": "不列颠哥伦比亚省", "pinYin": "bu lie dian ge lun bi ya sheng" }, { "cityName": "皮沃那克", "pinYin": "pi wo na ke" }, { "cityName": "祺布嘎莫", "pinYin": "qi bu ga mo" }, { "cityName": "切弗里", "pinYin": "qie fu li" }, { "cityName": "恰赫巴哈尔", "pinYin": "qia he ba ha er" }, { "cityName": "奇帕维安堡市", "pinYin": "qi pa wei an bao shi" }, { "cityName": "齐齐克塔胡亚克", "pinYin": "qi qi ke ta hu ya ke" }, { "cityName": "切塞西比", "pinYin": "qie sai xi bi" }, { "cityName": "切斯特菲尔德因莱特", "pinYin": "qie si te fei er de yin lai te" }, { "cityName": "魁北克省", "pinYin": "kui bei ke sheng" }, { "cityName": "萨思喀彻温省", "pinYin": "sa si ka che wen sheng" }, { "cityName": "东京羽田", "pinYin": "dong jing yu tian" }, { "cityName": "茨城县", "pinYin": "ci cheng xian" }, { "cityName": "大阪府", "pinYin": "da ban fu" }, { "cityName": "黑森州", "pinYin": "hei sen zhou" }, { "cityName": "马尔马拉地区", "pinYin": "ma er ma la di qu" }, { "cityName": "伊尔库茨克州", "pinYin": "yi er ku ci ke zhou" }, { "cityName": "基辅州", "pinYin": "ji fu zhou" }, { "cityName": "纽约州", "pinYin": "niu yue zhou" }, { "cityName": "普吉府", "pinYin": "pu ji fu" }, { "cityName": "蒙大拿州", "pinYin": "meng da na zhou" }, { "cityName": "阿盖尔", "pinYin": "a gai er" }, { "cityName": "奥兰加巴德", "pinYin": "ao lan jia ba de" }, { "cityName": "昌迪加尔", "pinYin": "chang di jia er" }, { "cityName": "查漠", "pinYin": "cha mo" }, { "cityName": "赤塔", "pinYin": "chi ta" }, { "cityName": "岛根县", "pinYin": "dao gen xian" }, { "cityName": "伊玛姆科梅尼", "pinYin": "yi ma mu ke mei ni" }, { "cityName": "北达科他州", "pinYin": "bei da ke ta zhou" }, { "cityName": "大特克", "pinYin": "da te ke" }, { "cityName": "大峡谷", "pinYin": "da xia gu" }, { "cityName": "科罗拉多州", "pinYin": "ke luo la duo zhou" }, { "cityName": "复活节岛", "pinYin": "fu huo jie dao" }, { "cityName": "北部地区", "pinYin": "bei bu di qu" }, { "cityName": "巴拉那州", "pinYin": "ba la na zhou" }, { "cityName": "果阿", "pinYin": "guo a" }, { "cityName": "哈博罗内", "pinYin": "ha bo luo nei" }, { "cityName": "甘巴", "pinYin": "gan ba" }, { "cityName": "甘贝拉", "pinYin": "gan bei la" }, { "cityName": "甘比尔岛", "pinYin": "gan bi er dao" }, { "cityName": "大开曼岛", "pinYin": "da kai man dao" }, { "cityName": "根西岛", "pinYin": "gen xi dao" }, { "cityName": "犹他州", "pinYin": "you ta zhou" }, { "cityName": "新泽西州", "pinYin": "xin ze xi zhou" }, { "cityName": "北马里亚纳群岛", "pinYin": "bei ma li ya na qun dao" }, { "cityName": "广岛县", "pinYin": "guang dao xian" }, { "cityName": "西约塔兰省", "pinYin": "xi yue ta lan sheng" }, { "cityName": "西约塔兰省", "pinYin": "xi yue ta lan sheng" }, { "cityName": "日内瓦州", "pinYin": "ri nei wa zhou" }, { "cityName": "戈夫", "pinYin": "ge fu" }, { "cityName": "新南威尔士", "pinYin": "xin nan wei er shi" }, { "cityName": "新南威尔士", "pinYin": "xin nan wei er shi" }, { "cityName": "格拉斯哥", "pinYin": "ge la si ge" }, { "cityName": "卡卡梅加", "pinYin": "ka ka mei jia" }, { "cityName": "朗维尤", "pinYin": "lang wei you" }, { "cityName": "乔治敦", "pinYin": "qiao zhi dun" }, { "cityName": "格施姆", "pinYin": "ge shi mu" }, { "cityName": "戈韦诺港", "pinYin": "ge wei nuo gang" }, { "cityName": "斯特拉斯克莱德", "pinYin": "si te la si ke lai de" }, { "cityName": "北卡罗莱纳州", "pinYin": "bei ka luo lai na zhou" }, { "cityName": "南卡罗来纳州", "pinYin": "nan ka luo lai na zhou" }, { "cityName": "贾赞", "pinYin": "jia zan" }, { "cityName": "吉尔吉特", "pinYin": "ji er ji te" }, { "cityName": "盖梅纳", "pinYin": "gai mei na" }, { "cityName": "戈马", "pinYin": "ge ma" }, { "cityName": "佛罗里达州", "pinYin": "fo luo li da zhou" }, { "cityName": "冈尼森", "pinYin": "gang ni sen" }, { "cityName": "格林纳达", "pinYin": "ge lin na da" }, { "cityName": "格罗德诺", "pinYin": "ge luo de nuo" }, { "cityName": "利古里亚大区", "pinYin": "li gu li ya da qu" }, { "cityName": "格尔夫波特(加佛港)", "pinYin": "ge er fu bo te ( jia fo gang )" }, { "cityName": "瓜比", "pinYin": "gua bi" }, { "cityName": "加拉帕戈斯", "pinYin": "jia la pa ge si" },{ "cityName": "西希腊", "pinYin": "xi xi la" }, { "cityName": "安达卢西亚", "pinYin": "an da lu xi ya" }, { "cityName": "密歇根州", "pinYin": "mi xie gen zhou" }, { "cityName": "俄勒冈州", "pinYin": "e le gang zhou" }, { "cityName": "格拉尼特斯", "pinYin": "ge la ni te si" }, { "cityName": "蒙大拿州", "pinYin": "meng da na zhou" }, { "cityName": "格鲁美地", "pinYin": "ge lu mei di" }, { "cityName": "哥伦打洛省", "pinYin": "ge lun da luo sheng" }, { "cityName": "米纳斯吉拉斯州", "pinYin": "mi na si ji la si zhou" }, { "cityName": "瓜德尔", "pinYin": "gua de er" }, { "cityName": "中央邦", "pinYin": "zhong yang bang" }, { "cityName": "古瓦哈蒂", "pinYin": "gu wa ha di" }, { "cityName": "塞云", "pinYin": "sai yun" }, { "cityName": "瓜亚斯省", "pinYin": "gua ya si sheng" }, { "cityName": "加济安泰普", "pinYin": "jia ji an tai pu" }, { "cityName": "东京成田", "pinYin": "dong jing cheng tian" }, { "cityName": "大阪府", "pinYin": "da ban fu" }, { "cityName": "大伦敦", "pinYin": "da lun dun" }, { "cityName": "大伦敦", "pinYin": "da lun dun" }, { "cityName": "大伦敦", "pinYin": "da lun dun" }, { "cityName": "大伦敦", "pinYin": "da lun dun" }, { "cityName": "大伦敦", "pinYin": "da lun dun" }, { "cityName": "加利福尼亚州", "pinYin": "jia li fu ni ya zhou" }, { "cityName": "加利福尼亚州", "pinYin": "jia li fu ni ya zhou" }, { "cityName": "基辅州", "pinYin": "ji fu zhou" }, { "cityName": "莫斯科州", "pinYin": "mo si ke zhou" }, { "cityName": "国家首都区", "pinYin": "guo jia shou du qu" }, { "cityName": "纽约州", "pinYin": "niu yue zhou" }, { "cityName": "纽约州", "pinYin": "niu yue zhou" }, { "cityName": "佛罗里达州", "pinYin": "fo luo li da zhou" }, { "cityName": "甲米府", "pinYin": "jia mi fu" }, { "cityName": "洛坤府", "pinYin": "luo kun fu" }, { "cityName": "伊利诺伊州", "pinYin": "yi li nuo yi zhou" }, { "cityName": "阿拉斯加州", "pinYin": "a la si jia zhou" }, { "cityName": "吉兰丹州", "pinYin": "ji lan dan zhou" }, { "cityName": "列日", "pinYin": "lie ri" }, { "cityName": "新罕布什尔州", "pinYin": "xin han bu shen er zhou" }, { "cityName": "西米沙鄢", "pinYin": "xi mi sha yan" }, { "cityName": "西米沙鄢", "pinYin": "xi mi sha yan" }, { "cityName": "墨西哥州", "pinYin": "mo xi ge zhou" }, { "cityName": "俄亥俄州", "pinYin": "e hai e zhou" }, { "cityName": "长崎县", "pinYin": "chang qi xian" }, { "cityName": "威斯康星州", "pinYin": "wei si kang xing zhou" }, { "cityName": "阿拉斯加州", "pinYin": "a la si jia zhou" }, { "cityName": "俄亥俄州", "pinYin": "e hai e zhou" }, { "cityName": "戴得曼斯凯", "pinYin": "dai de man si kai" }, { "cityName": "北莱茵-威斯特法伦州", "pinYin": "bei lai yin - wei si te fa lun zhou" }, { "cityName": "恩多拉", "pinYin": "en duo la" }, { "cityName": "恩菲达", "pinYin": "en fei da" }, { "cityName": "恩冈代雷", "pinYin": "en gang dai lei" }, { "cityName": "罗纳-阿尔卑斯大区", "pinYin": "luo na - a er bei si da qu" }, { "cityName": "彭亨州", "pinYin": "peng heng zhou" }, { "cityName": "岩手县", "pinYin": "yan shou xian" }, { "cityName": "宫崎县", "pinYin": "gong qi xian" }, { "cityName": "光州广域市", "pinYin": "guang zhou guang yu shi" }, { "cityName": "高知县", "pinYin": "gao zhi xian" }, { "cityName": "汉堡州", "pinYin": "han bao zhou" }, { "cityName": "哈巴罗夫斯克", "pinYin": "ha ba luo fu si ke" }, { "cityName": "内华达州", "pinYin": "nei hua da zhou" }, { "cityName": "西约克郡", "pinYin": "xi yue ke jun" }, { "cityName": "大曼彻斯特", "pinYin": "da man che si te" }, { "cityName": "莱比锡", "pinYin": "lai bi xi" }, { "cityName": "奥斯雷德涅斯洛文统计区", "pinYin": "ao si lei de nie si luo wen tong ji qu" }, { "cityName": "拉纳卡", "pinYin": "la na ka" }, { "cityName": "林茨", "pinYin": "lin ci" }, { "cityName": "拉科鲁利亚", "pinYin": "la ke lu li ya" }, { "cityName": "列宁格勒州", "pinYin": "lie ning ge le zhou" }, { "cityName": "鹿儿岛县", "pinYin": "lu er dao xian" }, { "cityName": "大雷克雅未克区", "pinYin": "da lei ke ya wei ke qu" }, { "cityName": "肯塔基州", "pinYin": "ken ta ji zhou" }, { "cityName": "洛美", "pinYin": "luo mei" }, { "cityName": "路易斯安那州", "pinYin": "lu yi si an na zhou" }, { "cityName": "维多利亚", "pinYin": "wei duo li ya" }, { "cityName": "拉弗里亚", "pinYin": "la fu li ya" }, { "cityName": "拉各斯", "pinYin": "la ge si" }, { "cityName": "吉打州", "pinYin": "ji da zhou" }, { "cityName": "比科尔", "pinYin": "bi ke er" }, { "cityName": "拉合尔", "pinYin": "la he er" }, { "cityName": "沙巴州", "pinYin": "sha ba zhou" }, { "cityName": "北博滕省", "pinYin": "bei bo teng sheng" }, { "cityName": "利马", "pinYin": "li ma" }, { "cityName": "西怒沙登加拉", "pinYin": "xi nu sha deng jia la" }, { "cityName": "内布拉斯加州", "pinYin": "nei bu la si jia zhou" }, { "cityName": "朗勃拉邦", "pinYin": "lang bo la bang" }, { "cityName": "东约特兰省", "pinYin": "dong yue te lan sheng" }, { "cityName": "拉巴斯", "pinYin": "la ba si" }, { "cityName": "莱吉萨莫港", "pinYin": "lai ji sa mo gang" }, { "cityName": "弗吉尼亚州", "pinYin": "fu ji ni ya zhou" }, { "cityName": "得克萨斯州", "pinYin": "de ke sa si zhou" }, { "cityName": "拉罗马纳", "pinYin": "la luo ma na" }
]

组件CityChoose.vue

<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus';
import city from './city.json'
import cityIntl from './cityIntl.json'const { el } = withDefaults(defineProps<{el?: HTMLElement;
}>(), {el: undefined
})const activeSlide = ref('DOMESTIC') //DOMESTIC 国内  INTL 国际及中国港澳台
const activeTag = ref('热门')
const pos = reactive({top: 0,left: 0
})
const emit = defineEmits(['handleCityClick'])// 计算选择器弹出的窗口位置
function calc() {if (el) {pos.top = el.getBoundingClientRect().height + el.offsetTop + 6 // 6额外偏移pos.left = el.offsetLeft} else {console.warn('请传入el元素,用于计算窗口弹出位置');}
}const handleClick = (tab: TabsPaneContext, event: Event) => {
}function toggleSlide(slideName: string) {activeSlide.value = slideName// queryflightCityList()if (slideName === 'DOMESTIC') {cityList.value = city} else {cityList.value = cityIntl}
}const handleCityMap = ref<{ [key: string]: any }>({'热门': [{cityName: '北京',pinYin: 'BEIJING',}]
})
const cityList = ref<any[]>([])function handleCityClick(cityName: string) {emit('handleCityClick', cityName)
}// 二次划分 按照字母c
function partTwoByCharacter(c: string) {c = c.toUpperCase()return cityList.value.filter((v: any) => {return v.pinYin.charAt(0).toUpperCase() === c})
}onMounted(() => {calc();cityList.value = city
})
</script><template><div class="city_choose_wrap" :style="{ top: pos.top + 'px', left: pos.left + 'px' }"><div class="choose_left"><p class="left_item" :class="activeSlide === 'DOMESTIC' ? 'slide_active' : ''" @click="toggleSlide('DOMESTIC')">国内</p><p class="left_item" :class="activeSlide === 'INTL' ? 'slide_active' : ''" @click="toggleSlide('INTL')">国际及中国港澳台</p></div><div class="choose_right"><el-tabs v-model="activeTag" class="demo-tabs" @tab-click="handleClick"><el-tab-pane label="热门" name="热门"><div class="city_name"><p v-for="item in handleCityMap['热门']" @click="handleCityClick(item)">{{ item.cityName }}</p></div></el-tab-pane><el-tab-pane label="ABCDEF" name="ABCDEF"><div class="city_name_wrap"><div class="city_name_box" v-for="c in 'ABCDEF'.split('')"><div class="font-semibold">{{ c }}</div><div class="city_name"><p v-for="item in partTwoByCharacter(c)" @click="handleCityClick(item)">{{ item.cityName }}</p></div></div></div></el-tab-pane><el-tab-pane label="GHIJ" name="GHIJ"><div class="city_name_wrap"><div class="city_name_box" v-for="c in 'GHIJ'.split('')"><div class="font-semibold">{{ c }}</div><div class="city_name"><p v-for="item in partTwoByCharacter(c)" @click="handleCityClick(item)">{{ item.cityName }}</p></div></div></div></el-tab-pane><el-tab-pane label="KLMN" name="KLMN"><div class="city_name_wrap"><div class="city_name_box" v-for="c in 'KLMN'.split('')"><div class="font-semibold">{{ c }}</div><div class="city_name"><p v-for="item in partTwoByCharacter(c)" @click="handleCityClick(item)">{{ item.cityName }}</p></div></div></div></el-tab-pane><el-tab-pane label="PQRSTUVW" name="PQRSTUVW"><div class="city_name_wrap"><div class="city_name_box" v-for="c in 'PQRSTUVW'.split('')"><div class="font-semibold">{{ c }}</div><div class="city_name"><p v-for="item in partTwoByCharacter(c)" @click="handleCityClick(item)">{{ item.cityName }}</p></div></div></div></el-tab-pane><el-tab-pane label="XYZ" name="XYZ"><div class="city_name_wrap"><div class="city_name_box" v-for="c in 'XYZ'.split('')"><div class="font-semibold">{{ c }}</div><div class="city_name"><p v-for="item in partTwoByCharacter(c)" @click="handleCityClick(item)">{{ item.cityName }}</p></div></div></div></el-tab-pane></el-tabs></div></div>
</template><style scoped>
.city_choose_wrap {position: absolute;background: #fff;box-shadow: 0px 0px 12px #ccc;border-radius: 8px;overflow: hidden;display: flex;height: 300px;width: 690px;z-index: 999;.choose_left {background: #F5F5F5;padding: 8px 12px;.left_item {width: 112px;padding: 4px 12px;border-radius: 4px;/* transition: all .1s; */margin-bottom: 8px;cursor: pointer;/* &:hover {background: #3D6CFE;color: #fff;} */}}.choose_right {background: #fff;padding: 4px 12px;height: full;overflow-y: auto;p {cursor: pointer;&:hover {color: #3D6CFE;}}.city_name_wrap {height: 224px;overflow-y: auto;.city_name_box {display: flex;gap: 16px;.font-semibold {font-weight: 600;}.city_name {display: flex;flex-wrap: wrap;gap: 8px;font-size: 14px;line-height: 20px;color: #374151;margin-bottom: 16px;}}}}.slide_active {background: #3D6CFE;color: #fff;}
}
</style>

使用方式

同上，此时的回调是一个对象

function handleChildrenCityClick(cityInfo: Record<string,any>) {console.log(cityInfo); // 父类中获取点击的城市名称
}

效果图