js 记录下仿携程城市选择

城市选择组件

描述：由于之前需要写一个订票的页面，于是乎在网上搜索了些控件自己对比了下，仿着其中一个组件写了一个，属于重复造轮子，但是目的主要是记录自己的成长，以及方便日后查找

有图有真相，先上图看下效果

大概就是上图这个样子，点击input框后，弹出城市选择组件，点击其中一个具体的城市或者空表区域隐藏组件（有个小bug,点击空白区域可能不太灵敏）

直接上代码

主要包含两个ul ，第一个ul主要存放ABCD等的titlebar,第二个ul主要放城市以及城市类型，代码比较简单，很容易看懂

注意的点：

		hideDialog(event) {
				var sp1 = document.getElementById("startPanel");
				var sp2 = document.getElementById("endPanel");
				//点击的是到达城市区域
				if(!sp1.contains(event.target) && sp2.contains(event.target)) { 
					this.showStartCity  = false;
				}//点击的是出发城市区域
				else if(!sp2.contains(event.target) && sp1.contains(event.target)){
					this.showEndCity  = false;
				}else{
					this.showStartCity  = false;
					this.showEndCity  = false;
				}
			}

数据源大概是这个样子：

const dataList = [{
		"airportCode": "YIE",
		"cityInfo": "AES-阿尔山-YIE",
		"cityName": "阿尔山市",
		"airportName": "伊尔施",
		"status": 0,
		"lat": 47.3155940318,
		"lng": 119.9293992017
	}, {
		"airportCode": "AKA",
		"cityInfo": "AK-安康-AKA",
		"cityName": "安康",
		"airportName": "五里铺",
		"status": 0,
		"lat": 32.7132899844,
		"lng": 108.9462270884
	}]

数据源地址：