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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。