weex vue实现省市区县三级联动选择（包括数据源）
2020-02-19 本文已影响0人
silencefun
参考weex 实现仿ios 三级联动地址选择器
做了一些改进
一、改进部分：
1.增加是否显示县区级单位控制。
2.增加直辖市返回是否 显示三级样式。
3.修改数据源排列，直辖市放到最前面。
4.补全数据源中台湾省（只有市，没有县）。
5.修改源码中一些可能空指针错误（某些市下面没有区县行政区划）。
6.完善半透明遮罩，而非全局半透明。
7.删除无效引用，补充缺少的变量声明，完善更换上级索引下级索引默认为第一个。
二、使用
说明：
1.showdisList //是否显示 县区级行政
2.renturnMunicipalityThree
返回直辖市 北京-北京-东城 这样格式 若为false 省-市两级 则是 北京一个
使用的时候：
<template>
<div >
<text class="title" @click="update" :value="date"> </text>
<selectvue class="list-mask" v-if="isselectaddress" :proviceList="proviceList" :cityListMap="cityListMap" :disListMap="disListMap" @haveselectedaddress="selectedaddress"></selectvue>
</div>
</template>
<style>
.title { font-size: 48px; }
.list-mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 750px;
z-index: 10;
}
</style>
<script>
import selectvue from '@/components/select_address.vue'
import citydata from "./data/citydataconfig.js";
export default {
components:{selectvue},
methods: {
update(e) {
this.isselectaddress = true
},
selectedaddress(evtValue){
this.isselectaddress = false
if(evtValue === ''){
return
}
this.date = evtValue
}
},
data(){
return{
proviceList:[],
cityListMap:{},
disListMap:{},
isselectaddress: false,
date:'点击选择地址',
showdisList: true,//显示县区级单位
renturnMunicipalityThree: true,//直辖市是否显示三级
}
},
mounted(){
this.proviceList = citydata.proviceList;
this.cityListMap = citydata.cityListMap;
this.disListMap = citydata.disListMap;
}
}
</script>
截图：
展示效果图
项目地址包括数据源（数据源可能是2017年的数据）：
