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中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
JavaScript严格模式详解
Jan 16 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
JS实现电商商品展示放大镜特效
Jan 07 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实现模拟post请求用法实例
2015/07/11 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
jQuery 使用个人心得
2009/02/26 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python @property装饰器原理解析
2020/01/22 Python
logging level级别介绍
2020/02/21 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
浅析python中的del用法
2020/09/02 Python
python math模块的基本使用教程
2021/01/16 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
联想C++笔试题
2012/06/13 面试题
密封类可以有虚函数吗
2014/08/11 面试题
机电专业个人求职信范文
2013/12/30 职场文书
迎元旦广播稿
2014/02/22 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
年检委托书
2014/08/30 职场文书
四风问题对照检查材料
2014/09/22 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL