本文实例为大家分享了vue实现手机端省市区区域选择的具体代码，供大家参考，具体内容如
本文实例为大家分享了vue实现手机端省市区区域选择的具体代码，供大家参考，具体内容如下
1 后端接口获取城市信息
2 先获取省 根据用户点击的省获取市
3 再根据用户点击的市获取区
组件代码：
<template>
<div class="city">
<!-- 点击此处 省市区选择出现 -->
<div class="chooseCity" @click="clickCity">{{chooseCity}}</div>
<div class="boxcity" v-if="showCity">
<!-- 省市区的标题 点击可回退 -->
<div class="chooseTit">
<p @click="chooseProvince" v-show='tit1'>{{chooseTit1}}</p>
<p @click="chooseCity2" v-show='tit2'>{{chooseTit2}}</p>
<p v-show='tit3'>{{chooseTit3}}</p>
</div>
<!-- 省市区 -->
<div class="citys">
<div @click="getCity" class="province">
<ul v-show="showProvince">
<li v-for="item in provinceL" :key="item.regionId" @click="getProvince(item)">{{item.regionName}}</li>
</ul>
<ul v-show="showCity2">
<li v-for="item in cityL" :key="item.regionId" @click="getCity2(item)">{{item.regionName}}</li>
</ul>
<ul v-show="showarea">
<li v-for="item in areaL" :key="item.regionId" @click="getarea(item)">{{item.regionName}}</li>
</ul>
</div>
</div>
</div>
<!-- 遮罩层 -->
<div class="mask" v-show="mackShow" @click="closeMask"></div>
</div>
</template>
<script>
export default {
data () {
return {
chooseCity:"点击我选择",
selected : '',
citySelected: '',
areaSelected: '',
provinceL : [],
cityL : [],
areaL : [],
city : [],
provinceName: '',
cityName : '',
areaName : '',
showProvince:true,
showCity:false,
showCity2:false,
showarea:false,
chooseTit1:"省",
chooseTit2:"市",
chooseTit3:"区",
tit1:true,
tit2:false,
tit3:false,
mackShow:false,
province:"",
Nextcity:"",
district:"",
totalCity:"",
}
},
methods:{
//点击省市标题隐藏出现内容 形成回退效果
chooseProvince(){
this.showProvince = true;
this.showCity2 = false;
},
chooseCity2(){
this.showProvince = false;
this.showCity2 = true;
this.showarea = false;
},
//点击省市区出现
clickCity(){
this.showCity = true;
this.mackShow = true;
},
//点击省市区 让每个li内展示的名字等于数据的城市名
getCity(){
for(var item of this.provinceL){
this.provinceName = item.regionName;
//this.regionId = item.regionId
}
},
//当用户点击某个省事件 根据省的id获取市
getProvince(item){
this.province = item.regionName
console.log(this.province);
// console.log(item.regionId);
this.$axios({
url:'http://192.168.1.16:0000/insurance-intact-wechat-api/get_regions?parentId='+item.regionId,
method: 'get'
}).then(res=>{
//console.log(res)
this.cityL = res.data;
this.citySelected = this.cityL[0].regionId;
this.showProvince = false;
this.showCity2= true;
this.tit2 = true;
})
this.areaL = [];
},
//当用户点击某个市事件 根据省的id获取区
getCity2(item){
this.Nextcity = item.regionName
console.log(this.Nextcity);
// console.log(item.regionId);
this.$axios({
url:'http://192.168.1.16:0000/insurance-intact-wechat-api/get_regions?parentId='+item.regionId,
method: 'get'
}).then(res=>{
//console.log(res)
this.areaL = res.data;
this.areaSelected = this.areaL[0].regionId;
this.showarea = true;
this.showCity2= false;
this.tit3 = true;
})
},
//用户点击区或者镇，遮罩消失
getarea(item){
this.district = item.regionName;
console.log(this.district);
var totalCity = this.province+"," + this.Nextcity +"," +this.district;
this.chooseCity =totalCity;
//console.log(item.regionId);
this.showCity = false;
this.mackShow = false;
},
closeMask(){
this.showCity = false;
this.mackShow = false;
}
},
//页面初始化 请求数据 将请求到的城市保存下来
created() {
var url="http://192.168.1.16:0000/insurance-intact-wechat-api/get_regions?parentId=0";
this.$axios({
method:'get',
url:url,
withCredentials: true,
crossDomain: true,
data:"data",
headers: {
'Content-Type':'application/x-www-form-urlencoded',
}
}).then(res=>{
//console.log(res.data);
this.provinceL = res.data;
})
.catch(error=>{
console.log(error);
});
},
}
</script>
<style scoped>
.chooseCity{
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #666;
}
.boxcity{
position: absolute;
width: 40%;
right: 0;
top:0;
height: 60%;
z-index: 100;
background: #ffffff;
}
.citys{
border-top: 1px solid #666;
height: 100%;
overflow: hidden;
overflow-y: scroll;
background: #ffffff;
}
.province{
height: 100%;
}
/* 让滚动条不显示 */
.citys::-webkit-scrollbar {
display: none;
}
ul{
margin:0;
padding:0;
}
li{
list-style: none;
margin-top: 10px;
}
.chooseTit {
display: flex;
justify-content: space-around;
width: 100%;
text-align: center;
background: #448ff7;
}
.chooseTit p{
color: #ffffff;
}
.mask{
position: absolute;
width: 100%;
height: 100%;
background: black;
opacity: .5;
top:0;
left: 0;
z-index: 90;
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
vue手机端省市区区域选择 vue手机端区域选择 vue手机端省市区选择