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 相关文章推荐
jQuery输入城市查看地图使用介绍
May 08 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 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输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python实现图片转字符小工具
2019/04/30 Python
Python中常用的os操作汇总
2020/11/05 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
办公室助理岗位职责
2013/12/25 职场文书
卫生标语大全
2014/06/21 职场文书
道路施工安全责任书
2014/07/24 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
助学感谢信范文
2015/01/21 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
Python图像处理库PIL详细使用说明
2022/04/06 Python