用Vue實現省市區三級聯動

		<input type="text" placeholder="選擇地區" :value="addressText" readonly="" @click="addressModel = true" />

		<div class="model" v-show="addressModel" @click="addressModel = false">
			<div class="model-content" @click.stop="addressModel = true">
				<div class="addressBox">
					<ul>
						<li v-for="(provinceItem,provinceIndex) in addressList" @click.stop="onProvinceSelect(provinceIndex,provinceItem.text)" :class="{active: provinceIndex === activeProvince}">
							<span>{{provinceItem.text}}</span>
							<div class="cityBox">
								<ul>
									<li v-for="(cityItem,cityIndex) in provinceItem.children" @click.stop="onCitySelect(cityIndex,cityItem.text)" :class="{active: cityIndex === activeCity}">
										<span>{{cityItem.text}}</span>
										<div class="areaBox">
											<ul>
												<li v-for="(areaItem,areaIndex) in cityItem.children" @click.stop="onAreaSelect(areaIndex,areaItem.text)" :class="{active: areaIndex == activeArea}">
													<span>{{areaItem.text}}</span>
												</li>
											</ul>
										</div>
									</li>
								</ul>
							</div>
						</li>
					</ul>

				</div>
			</div>
		</div>

	</div>
複製程式碼

vue.js

	<script>		
		new Vue({
			el: "#app",
			data: {
				addressModel: false, /*選擇地址選擇模態框*/
				addressList: [], //城市列表
				province: '', //選中的省份 
				city: '', //選中的城市
				area: '', //選擇的區域
				addressText: '請選擇', //選中的完整地址
				activeProvince: 0, 
				activeCity: 0,
				activeArea: 0
			},
			mounted: function() {
				const that = this;
				that.addressList = init_city_picker;
			},
			methods: {
				/*選擇省份*/
				onProvinceSelect: function(index, item) {
					var that = this;
					that.activeProvince = index;
					that.province = item;
					that.addressText = that.province;
					console.log(index, that.activeProvince, that.province)
				},
				/*選擇城市*/
				onCitySelect: function(index, item) {
					var that = this;
					that.activeCity = index;
					that.city = item
					that.addressText = that.province + " " + that.city;
					console.log(index, that.activeCity, that.city, that.addressText);
				},
				/*選擇區域*/
				onAreaSelect: function(index, item) {
					var that = this;
					that.activeArea = index;
					that.area = item
					that.addressText = that.province + " " + that.city + " " + that.area;
					that.addressModel = false;
					console.log(index, that.activeArea, that.area, that.addressText);
				}
			}
		})
	</script>
複製程式碼

css

.addressBox{
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5.1rem;
    z-index: 9;
    background: #f5f5f5;
    display: block!important;
}
.addressBox ul{
    width: 33%;
    height: 5.1rem;
    background: #E6E6E6;
    overflow-y: scroll;
    overflow-x: auto;
}
.addressBox li{
	height: 0.62rem;
	font: normal 0.26rem/0.62rem "微軟雅黑";
	color: #666;
	text-align: center;
}
.cityBox{
    position: absolute;
    top: 0;
    left: 33%;
    width: 100%;
    height: 5.1rem;
    display: none;
    overflow-y: scroll;
    z-index: 19;
    background: #E6E6E6;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}
.cityBox ul{
    width: 100%;
    height: 5.1rem;
}
.cityBox li{
    padding-left: 0.17rem;
    text-align: left;
    border-bottom: 0.01rem solid #e6e6e6;
}
.areaBox{
position: absolute;
    top: 0;
    left: 33%;
    width: 33%;
    height: 5.1rem;
    display: none;
    overflow-y: scroll;
    z-index: 9999;
    -webkit-overflow-scrolling: touch;
}

/*模態框*/
.model {
  position: absolute;
  top: 0%;
  left: 0%;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
}
.model-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: .15rem;
  margin: auto;
  background-color: #ffffff;
  text-align: center;
}
input{
	font-size: 0.32rem;
	width: 100%;
	text-align: center;
	margin-top: .3rem;
	border:1px solid #ccc;
}
/*點選省份，出現城市*/
.addressBox .active{
	background: #f5f5f5;
}
.addressBox .active .cityBox{
	display: block;
}
/*點選城市，出現區域*/
.cityBox .active{
	background: #f5f5f5;
}
.cityBox .active .areaBox{
	display: block;
}
複製程式碼