vue2实现省市区级联选择插件( 优化版),鼠标移入弹出移出隐藏

113.png
<style scoped>
.showChose{
width:100%;
display: none;
position:absolute;
z-index:1200;
border:1px solid rgba(221,221,221,0.8);
background-color: #fff;
/background:rgba(77,82,113,0.8);/
}
.city:hover .showChose{
display: block;
}
.title h4{
display:inline-block;
font-size: 16px;
line-height:0.88rem;
font-weight:normal;
color:#fff;
}
.area{
display:inline-block;
/font-size:0.24rem;/
font-size: 16px;
padding: 12px;
line-height:0.88rem;
margin-left:0.42rem;
color:#333;
/color:#fff;/
}
.addList{
width:100%;
padding-left:0.32rem;
/font-size:0.34rem;/
font-size: 14px;
line-height:0.88rem;
color:#333;
}
/* 修改的格式 /
.address ul{
width:100%;
height:100%;
padding:10px;
/margin:10px;/
/max-height: 4.4rem;/
overflow:auto;
}
.address ul li{
/margin-left:5%;/
padding: 5px;
/加上好可横向显示/
display: inline;
/高度距离/
line-height: 40px;
/float:left;
list-style: none*/
}
.address .title .active{
color:#0071B8;
border-bottom:0.02rem solid #0071B8;
}
.address ul .active{
color:#0071B8;
}
</style>
<template>
<div class="">

<div class="city">
<Button style="background:#b7aeda;color:#fff;font-size:16px" class="buttondiv" @click="showChose = true">{{Province?Province:info[province-1].name}} {{City ? City:''}} {{District ? District:''}}<Icon type="chevron-down" style="margin-left:3px"></Icon></Button>
<section class="showChose" style="width:360px;">
<section class="address">
<section class="title" style="background:#b7aeda;padding:20px;text-align: center;">
<h4>选择省或城市或(县,区)</h4>
</section>
<section class="title" style="background:#f2f2f2">
<div class="area" @click="provinceSelected()">{{Province?Province:info[province-1].name}}</div>
<div class="area" @click="citySelected()" :class="City?'':'active'">{{City?City:'请选择'}}</div>
<div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">{{District?District:'请选择'}}</div>
</section>
<ul>
<li class="addList" v-for="(v,k) in info" @click="getProvinceId(v.id, v.name, k)" v-show="showProvince" :class="v.selected ? 'active' : ''">{{v.name}}</li>
<li class="addList" v-for="(v,k) in showCityList" @click="getCityId(v.id, v.name, k)" v-show="showCity" :class="v.selected ? 'active' : ''">{{v.name}}</li>
<li class="addList" v-for="(v,k) in showDistrictList" @click="getDistrictId(v.id, v.name, k)" v-show="showDistrict" :class="v.selected ? 'active' : ''">{{v.name}}</li>
</ul>
</section>
</section>
</div>
</div>
</template>

<script>
import Cityjs from '../data/city.js'
//城市数据也可以直接写在data的info:[]中,但数据太大不建议,直接用js文件引入,
//文件太大如有需要的请加QQ群629907983下载
export default {
name: 'myAddress',
data () {
return {
showChose: false,
showProvince: true,
showCity: false,
showDistrict: false,
showCityList: false,
showDistrictList: false,
province: 1,//默认1为北京
city: 3,
district: 57,
GetProvinceId: 2,
District: false,
Province: false,
City: false,
selected: false,
infocity:[],
info: [],
}
},
created() {
this.info = Cityjs;
},
methods: {
choseAdd: function() {
this.showChose = true;
},
closeAdd: function() {
this.showChose = false;
},
_filter(add,name,code) {
let result = [];
for(let i=0;i<add.length;i++) {
if(code == add[i].id){
result = add[i][name];
}
}
return result;
},
getProvinceId: function(code,input,index) {
this.province = code;
this.Province = input;
this.showProvince=false;
this.showCity=true;
this.showDistrict = false;
this.showCityList = this._filter(this.info,'city',this.province);
// 点击选择当前
this.info.map( a => a.selected = false );
this.info[index].selected = true;
},
provinceSelected: function() {
// 清除市级和区级列表
this.showCityList = false;
this.showDistrictList = false;
// 清除市级和区级选项
this.City = false;
this.District = false;
// 选项页面的切换
this.showProvince = true;
this.showCity = false;
this.showDistrict = false;
},
getCityId: function(code, input, index) {
this.city = code;
this.City = input;
this.showProvince=false;
this.showCity=false;
this.showDistrict = true;
this.showDistrictList = this._filter(this.showCityList,'district',this.city);
// 选择当前添加active
this.showCityList.map( a => a.selected = false );
this.showCityList[index].selected = true;
},
citySelected: function() {
this.showProvince=false;
this.showCity=true;
this.showDistrict = false;
},
getDistrictId: function(code, input, index) {
this.district = code;
this.District = input;
// 选择当前添加active
this.showDistrictList.map( a => a.selected = false );
this.showDistrictList[index].selected = true;
// 选取市区选项之后关闭弹层
this.showChose = false;
},
districtSelected: function() {
this.showProvince=false;
this.showCity=false;
this.showDistrict = true;
}
}
}
</script>

//城市数据也可以直接写在data的info:[]中,但数据太大不建议,直接用js文件引入,
//文件太大如有需要的请加QQ群629907983下载