引入级联选择插件w-picker
sfmind
4 years ago
parent
8d08d5939f
commit
83bc6fac65
File diff suppressed because one or more lines are too long
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<view class="w-picker-view">
|
||||||
|
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column v-if="!hideArea">
|
||||||
|
<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import areaData from "./areadata/areadata.js"
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pickVal:[],
|
||||||
|
range:{
|
||||||
|
provinces:[],
|
||||||
|
citys:[],
|
||||||
|
areas:[]
|
||||||
|
},
|
||||||
|
checkObj:{}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
itemHeight:{
|
||||||
|
type:String,
|
||||||
|
default:"44px"
|
||||||
|
},
|
||||||
|
value:{
|
||||||
|
type:[Array,String],
|
||||||
|
default:""
|
||||||
|
},
|
||||||
|
defaultType:{
|
||||||
|
type:String,
|
||||||
|
default:"label"
|
||||||
|
},
|
||||||
|
hideArea:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
value(val){
|
||||||
|
this.initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getData(){
|
||||||
|
//用来处理初始化数据
|
||||||
|
let provinces=areaData;
|
||||||
|
let dVal=[];
|
||||||
|
let value=this.value;
|
||||||
|
let a1=value[0];//默认值省
|
||||||
|
let a2=value[1];//默认值市
|
||||||
|
let a3=value[2];//默认值区、县
|
||||||
|
let province,city,area;
|
||||||
|
let provinceIndex=provinces.findIndex((v)=>{
|
||||||
|
return v[this.defaultType]==a1
|
||||||
|
});
|
||||||
|
provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
|
||||||
|
let citys=provinces[provinceIndex].children;
|
||||||
|
let cityIndex=citys.findIndex((v)=>{
|
||||||
|
return v[this.defaultType]==a2
|
||||||
|
});
|
||||||
|
cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
|
||||||
|
let areas=citys[cityIndex].children;
|
||||||
|
let areaIndex=areas.findIndex((v)=>{
|
||||||
|
return v[this.defaultType]==a3;
|
||||||
|
});
|
||||||
|
areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
|
||||||
|
dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
|
||||||
|
province=provinces[provinceIndex];
|
||||||
|
city=citys[cityIndex];
|
||||||
|
area=areas[areaIndex];
|
||||||
|
let obj=this.hideArea?{
|
||||||
|
province,
|
||||||
|
city
|
||||||
|
}:{
|
||||||
|
province,
|
||||||
|
city,
|
||||||
|
area
|
||||||
|
}
|
||||||
|
return this.hideArea?{
|
||||||
|
provinces,
|
||||||
|
citys,
|
||||||
|
dVal,
|
||||||
|
obj
|
||||||
|
}:{
|
||||||
|
provinces,
|
||||||
|
citys,
|
||||||
|
areas,
|
||||||
|
dVal,
|
||||||
|
obj
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initData(){
|
||||||
|
let dataData=this.getData();
|
||||||
|
let provinces=dataData.provinces;
|
||||||
|
let citys=dataData.citys;
|
||||||
|
let areas=this.hideArea?[]:dataData.areas;
|
||||||
|
let obj=dataData.obj;
|
||||||
|
let province=obj.province,city=obj.city,area=this.hideArea?{}:obj.area;
|
||||||
|
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
|
||||||
|
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
|
||||||
|
this.range=this.hideArea?{
|
||||||
|
provinces,
|
||||||
|
citys,
|
||||||
|
}:{
|
||||||
|
provinces,
|
||||||
|
citys,
|
||||||
|
areas
|
||||||
|
};
|
||||||
|
this.checkObj=obj;
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.pickVal=dataData.dVal;
|
||||||
|
});
|
||||||
|
this.$emit("change",{
|
||||||
|
result:result,
|
||||||
|
value:value,
|
||||||
|
obj:obj
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlerChange(e){
|
||||||
|
let arr=[...e.detail.value];
|
||||||
|
let provinceIndex=arr[0],cityIndex=arr[1],areaIndex=this.hideArea?0:arr[2];
|
||||||
|
let provinces=areaData;
|
||||||
|
let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
|
||||||
|
let areas=this.hideArea?[]:((citys[cityIndex]&&citys[cityIndex].children)||citys[citys.length-1].children||[]);
|
||||||
|
let province=provinces[provinceIndex]||provinces[provinces.length-1],
|
||||||
|
city=citys[cityIndex]||[citys.length-1],
|
||||||
|
area=this.hideArea?{}:(areas[areaIndex]||[areas.length-1]);
|
||||||
|
let obj=this.hideArea?{
|
||||||
|
province,
|
||||||
|
city
|
||||||
|
}:{
|
||||||
|
province,
|
||||||
|
city,
|
||||||
|
area
|
||||||
|
}
|
||||||
|
if(this.checkObj.province.label!=province.label){
|
||||||
|
//当省更新的时候需要刷新市、区县的数据;
|
||||||
|
this.range.citys=citys;
|
||||||
|
if(!this.hideArea){
|
||||||
|
this.range.areas=areas;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
if(this.checkObj.city.label!=city.label){
|
||||||
|
//当市更新的时候需要刷新区县的数据;
|
||||||
|
if(!this.hideArea){
|
||||||
|
this.range.areas=areas;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.checkObj=obj;
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.pickVal=arr;
|
||||||
|
})
|
||||||
|
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
|
||||||
|
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
|
||||||
|
this.$emit("change",{
|
||||||
|
result:result,
|
||||||
|
value:value,
|
||||||
|
obj:obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "./w-picker.css";
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<view class="w-picker-view">
|
||||||
|
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="w-picker-item" v-for="(item,index) in range" :key="index">{{item[nodeKey]}}</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
itemHeight:{
|
||||||
|
type:String,
|
||||||
|
default:"44px"
|
||||||
|
},
|
||||||
|
options:{
|
||||||
|
type:[Array,Object],
|
||||||
|
default(){
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value:{
|
||||||
|
type:String,
|
||||||
|
default:""
|
||||||
|
},
|
||||||
|
defaultType:{
|
||||||
|
type:String,
|
||||||
|
default:"label"
|
||||||
|
},
|
||||||
|
defaultProps:{
|
||||||
|
type:Object,
|
||||||
|
default(){
|
||||||
|
return{
|
||||||
|
label:"label",
|
||||||
|
value:"value"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pickVal:[]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
nodeKey(){
|
||||||
|
return this.defaultProps.label;
|
||||||
|
},
|
||||||
|
nodeValue(){
|
||||||
|
return this.defaultProps.value;
|
||||||
|
},
|
||||||
|
range(){
|
||||||
|
return this.options
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
value(val){
|
||||||
|
if(this.options.length!=0){
|
||||||
|
this.initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
options(val){
|
||||||
|
this.initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if(this.options.length!=0){
|
||||||
|
this.initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
initData(){
|
||||||
|
let dVal=this.value||"";
|
||||||
|
let data=this.range;
|
||||||
|
let pickVal=[0];
|
||||||
|
let cur=null;
|
||||||
|
let label="";
|
||||||
|
let value,idx;
|
||||||
|
if(this.defaultType==this.nodeValue){
|
||||||
|
value=data.find((v)=>v[this.nodeValue]==dVal);
|
||||||
|
idx=data.findIndex((v)=>v[this.nodeValue]==dVal);
|
||||||
|
}else{
|
||||||
|
value=data.find((v)=>v[this.nodeKey]==dVal);
|
||||||
|
idx=data.findIndex((v)=>v[this.nodeKey]==dVal);
|
||||||
|
}
|
||||||
|
pickVal=[idx!=-1?idx:0];
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.pickVal=pickVal;
|
||||||
|
});
|
||||||
|
if(this.defaultType==this.nodeValue){
|
||||||
|
this.$emit("change",{
|
||||||
|
result:value?value[this.nodeKey]:data[0][this.nodeKey],
|
||||||
|
value:dVal||data[0][this.nodeKey],
|
||||||
|
obj:value?value:data[0]
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
this.$emit("change",{
|
||||||
|
result:dVal||data[0][this.nodeKey],
|
||||||
|
value:value?value[this.nodeValue]:data[0][this.nodeValue],
|
||||||
|
obj:value?value:data[0]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
handlerChange(e){
|
||||||
|
let arr=[...e.detail.value];
|
||||||
|
let pickVal=[arr[0]||0];
|
||||||
|
let data=this.range;
|
||||||
|
let cur=data[arr[0]];
|
||||||
|
let label="";
|
||||||
|
let value="";
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.pickVal=pickVal;
|
||||||
|
});
|
||||||
|
this.$emit("change",{
|
||||||
|
result:cur[this.nodeKey],
|
||||||
|
value:cur[this.nodeValue],
|
||||||
|
obj:cur
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "./w-picker.css";
|
||||||
|
</style>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
.w-picker-flex2{
|
||||||
|
flex:2;
|
||||||
|
}
|
||||||
|
.w-picker-flex1{
|
||||||
|
flex:1;
|
||||||
|
}
|
||||||
|
.w-picker-view {
|
||||||
|
width: 100%;
|
||||||
|
height: 476upx;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
z-index: 666;
|
||||||
|
}
|
||||||
|
.d-picker-view{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-picker-item {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 88upx;
|
||||||
|
line-height: 88upx;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 30upx;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue