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>

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