城市选择

功能介绍

1、城市搜索（中文、拼音、首字母）；
2、点击右侧字母列表速达对应城市；
3、整理了 2020 年最新的城市数据，数据地址 : /uxui/data/cityData.uts；

运行截图

组件事件

@choose : 返回数据 any[城市名称, code, 拼音]

组件方法

search(kwd:string) : 搜索城市

演示代码

<template>
	<view class="ux-body ux-page-color ux-flex1">
		<view style="padding:20rpx 100rpx;">
			<ux-search-bar 
			@inputting="inputting" 
			@clear="clear"></ux-search-bar>
		</view>
		<view class="ux-pt-small ux-pb-small">
			<text class="ux-h6">{{choosedCity == '' ? '请选择城市':'已选择 : ' + choosedCity}}</text>
		</view>
		<view class="ux-demo ux-flex1">
			<ux-choose-city 
			ref="chooseCityRef" 
			@choose="choose"></ux-choose-city>
		</view>
		<view style="height:20rpx;"></view>
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			choosedCity:"",
			searchTimer :-1
		}
	},
	methods: {
		choose : function(data:any[]){
			this.choosedCity = data[0] as string;
			// code
			console.log(data[1]);
			// pinyin
			console.log(data[2]);
		},
		inputting : function(kwd:string){
			if(this.searchTimer > 0){
				clearTimeout(this.searchTimer);
			}
			this.searchTimer = setTimeout(()=>{
				var chooseCityRef = this.$refs['chooseCityRef'] as UxChooseCityComponentPublicInstance;
				chooseCityRef.search(kwd);
			}, 300)
		},
		clear : function(){
			var chooseCityRef = this.$refs['chooseCityRef'] as UxChooseCityComponentPublicInstance;
			chooseCityRef.search("");
		}
	}
}
</script>
<style scoped>
</style>