vue实现手机端省市区区域选择


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
vue内置指令详解
Apr 03 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 #Javascript
vue选项卡切换登录方式小案例
Sep 27 #Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 #Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 #Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 #Javascript
vue实现倒计时获取验证码效果
Apr 17 #Javascript
通过layer实现可输入的模态框的例子
Sep 27 #Javascript
You might like
php Smarty初体验二 获取配置信息
2011/08/08 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python基本数据类型详细介绍
2014/03/11 Python
实例讲解python函数式编程
2014/06/09 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Django中的ajax请求
2018/10/19 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python实现Flappy Bird源码
2018/12/24 Python
基于python实现文件加密功能
2020/01/06 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
社区学雷锋活动策划方案
2014/01/30 职场文书
运动会口号16字
2014/06/07 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python