本文实例为大家分享了vue实现手机端省市区区域选择的具体代码,供大家参考,具体内容如下
1后端接口获取城市信息
2,先获取省,根据用户点击的省获取市
3,再根据用户点击的市获取区,
组件代码:
& lt; template>
& lt; div类="城市"比;
& lt; !——点击此处省市区选择出现——比;
& lt; div类=癱hooseCity @click”=癱lickCity”在{{chooseCity}} & lt;/div>
& lt; div类=v=皊howCity”比“boxcity”;
& lt; !——省市区的标题点击可回退——比;
& lt; div类=癱hooseTit”比;
& lt; p @click=癱hooseProvince v-show”=皌it1”在{{chooseTit1}} & lt;/p>
& lt; p @click=癱hooseCity2 v-show”=皌it2”在{{chooseTit2}} & lt;/p>
& lt; p v-show=' tit3 '在{{chooseTit3}} & lt;/p>
& lt;/div>
& lt; !——省市区——比;
& lt; div类="城市"比;
& lt; div @click=癵etCity”class=笆 北?
& lt; ul v-show=皊howProvince”比;
李& lt; v=皃rovinceL项”:关键="项目。regionId " @click=" getProvince(项)”在{{item.regionName}} & lt;/li>
& lt;/ul>
& lt; ul v-show=皊howCity2”比;
李& lt; v=癱ityL项”:关键="项目。regionId " @click=" getCity2(项)”在{{item.regionName}} & lt;/li>
& lt;/ul>
& lt; ul v-show=皊howarea”比;
& lt;李v=扒颉毕?关键="项目。regionId " @click=" getarea(项)”在{{item.regionName}} & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; !——遮罩层——比;
& lt; div类="面具" v-show=癿ackShow @click”=癱loseMask祝辞& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
chooseCity:“点击我选择”,
选择:”,
citySelected:”,
areaSelected:”,
provinceL: [],
cityL: [],
区域:[],
城市:[],
provinceName:”,
cityName:”,
areaName:”,
showProvince:没错,
showCity:假的,
showCity2:假的,
showarea:假的,
chooseTit1:“省”,
chooseTit2:“市”,
chooseTit3:“区”,
tit1:没错,
tit2:假的,
tit3:假的,
mackShow:假的,
省:“”,
Nextcity:“”,
区:“”,
totalCity:“”,
}
},
方法:{//点击省市标题隐藏出现内容形成回退效果
chooseProvince () {
这一点。showProvince=true;
这一点。showCity2=false;
},
chooseCity2 () {
这一点。showProvince=false;
这一点。showCity2=true;
这一点。showarea=false;
},//点击省市区出现
clickCity () {
这一点。showCity=true;
这一点。mackShow=true;
},//点击省市区让每个李内展示的名字等于数据的城市名
getCity () {
(var项this.provinceL) {
这一点。provinceName=item.regionName;//这个。regionId=item.regionId
}
},//当用户点击某个省事件根据省的id获取市
getProvince(项){
这一点。?item.regionName
console.log (this.province);//console.log (item.regionId);
美元。axios ({
url: http://192.168.1.16:0000 insurance-intact-wechat-api/get_regions& # 63; parentId=' + item.regionId,
方法:“得到”
})(res=祝辞{//console.log (res)
这一点。cityL=res.data;
这一点。citySelected=this.cityL [0] .regionId;
这一点。showProvince=false;
这一点。showCity2=true;
这一点。tit2=true;
}）
这一点。面积=[];
},//当用户点击某个市事件根据省的id获取区
getCity2(项){
这一点。Nextcity=item.regionName
console.log (this.Nextcity);//console.log (item.regionId);
美元。axios ({
url: http://192.168.1.16:0000 insurance-intact-wechat-api/get_regions& # 63; parentId=' + item.regionId,
方法:“得到”
})(res=祝辞{//console.log (res)
这一点。面积=res.data;
这一点。areaSelected=this.areaL [0] .regionId;
这一点。showarea=true;
这一点。showCity2=false;
这一点。tit3=true;
}）
},//用户点击区或者镇,遮罩消失
getarea(项){
这一点。区=item.regionName;
console.log (this.district);
var totalCity=Ｊ?”、“+。Nextcity +”、“+ this.district;
这一点。chooseCity=totalCity;//console.log (item.regionId);
这一点。showCity=false;
这一点。mackShow=false;
},
closeMask () {
这一点。showCity=false;
这一点。mackShow=false;
}
},//页面初始化请求数据将请求到的城市保存下来
创建(){
var url=" http://192.168.1.16:0000/insurance-intact-wechat-api get_regions& # 63; parentId=0”;
美元。axios ({
方法:“得到”,
url: url、
withCredentials:没错,
crossDomain:没错,
数据:“数据”,
标题:{
“内容类型”:“应用程序/x-www-form-urlencoded”,
}
})(res=祝辞{//console.log (res.data);
这一点。provinceL=res.data;
}）
.catch(错误=祝辞{
console.log(错误);
});
},
}
& lt;/script>
& lt; scoped>风格;
.chooseCity {
宽度:100%;
高度:40像素;
text-align:中心;
行高:40像素;
边界底部:1 px固体# 666;
}
.boxcity {
位置:绝对的;
宽度:40%;
右:0;
上图:0;
高度:60%;
z - index: 100;
背景:# ffffff;
}
.citys {
border-top: 1 px固体# 666;
高度:100%;
溢出:隐藏;
overflow-y:滚动;
背景:# ffffff;
}
.province {
高度:100%;
}/*让滚动条不显示*/.citys: -webkit-scrollbar {
显示:没有;
}
ul {
保证金:0;
填充:0;
}
李{
list-style:没有;
margin-top: 10 px;
}
.chooseTit {
显示:flex;
justify-content:空间;
宽度:100%;
text-align:中心;
背景:# 448 ff7;
}
.chooseTit p {
颜色:# ffffff;
}
.mask {
位置:绝对的;
宽度:100%;
高度:100%;
背景:黑色;
透明度:5;
上图:0;
左:0;
z - index: 90;
}
& lt;/style>
