站长资源网络编程
vue实现手机端省市区区域选择
简介本文实例为大家分享了vue实现手机端省市区区域选择的具体代码，供大家参考，具体内容如下1 后端接口获取城市信息2 先获取省 根据用户点击的省获取市3 再根据用户点击的市获取区 组件代码：
本文实例为大家分享了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"," + 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";
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。