城市选择器bug修复
This commit is contained in:
D
parent
7b2cc20729
commit
fa26bb8796
@ -1,23 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<u-popup :show="modelValue" mode="bottom" :popup="false"
|
<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
|
||||||
:mask="true" :closeable="true" :safe-area-inset-bottom="true"
|
close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
|
||||||
close-icon-color="#ffffff" :z-index="uZIndex"
|
<u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
|
||||||
:maskCloseAble="maskCloseAble" @close="close">
|
ref="tabs" />
|
||||||
<u-tabs v-if="modelValue" :list="genTabsList"
|
|
||||||
:scrollable="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
|
|
||||||
<view class="area-box">
|
<view class="area-box">
|
||||||
<view class="u-flex" :class="{ 'change':isChange }">
|
<view class="u-flex" :class="{ 'change': isChange }">
|
||||||
<view class="area-item">
|
<view class="area-item">
|
||||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||||
<scroll-view :scroll-y="true" style="height: 100%">
|
<scroll-view :scroll-y="true" style="height: 100%">
|
||||||
<u-cell-group>
|
<u-cell-group>
|
||||||
<u-cell v-for="(item,index) in provinces"
|
<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false" :index="index"
|
||||||
:title="item.label" :arrow="false"
|
:key="index" @click="provinceChange(index)">
|
||||||
:index="index" :key="index"
|
|
||||||
@click="provinceChange(index)">
|
|
||||||
<template v-slot:right-icon>
|
<template v-slot:right-icon>
|
||||||
<u-icon v-if="isChooseP&&province===index"
|
<u-icon v-if="isChooseP && province === index" size="17"
|
||||||
size="17" name="checkbox-mark"></u-icon>
|
name="checkbox-mark"></u-icon>
|
||||||
</template>
|
</template>
|
||||||
</u-cell>
|
</u-cell>
|
||||||
</u-cell-group>
|
</u-cell-group>
|
||||||
@ -28,13 +24,10 @@
|
|||||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||||
<scroll-view :scroll-y="true" style="height: 100%">
|
<scroll-view :scroll-y="true" style="height: 100%">
|
||||||
<u-cell-group v-if="isChooseP">
|
<u-cell-group v-if="isChooseP">
|
||||||
<u-cell v-for="(item,index) in citys"
|
<u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
|
||||||
:title="item.label" :arrow="false"
|
:key="index" @click="cityChange(index)">
|
||||||
:index="index" :key="index"
|
|
||||||
@click="cityChange(index)">
|
|
||||||
<template v-slot:right-icon>
|
<template v-slot:right-icon>
|
||||||
<u-icon v-if="isChooseC&&city===index"
|
<u-icon v-if="isChooseC && city === index" size="17" name="checkbox-mark"></u-icon>
|
||||||
size="17" name="checkbox-mark"></u-icon>
|
|
||||||
</template>
|
</template>
|
||||||
</u-cell>
|
</u-cell>
|
||||||
</u-cell-group>
|
</u-cell-group>
|
||||||
@ -45,13 +38,10 @@
|
|||||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||||
<scroll-view :scroll-y="true" style="height: 100%">
|
<scroll-view :scroll-y="true" style="height: 100%">
|
||||||
<u-cell-group v-if="isChooseC">
|
<u-cell-group v-if="isChooseC">
|
||||||
<u-cell v-for="(item,index) in areas"
|
<u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
|
||||||
:title="item.label" :arrow="false"
|
:key="index" @click="areaChange(index)">
|
||||||
:index="index" :key="index"
|
|
||||||
@click="areaChange(index)">
|
|
||||||
<template v-slot:right-icon>
|
<template v-slot:right-icon>
|
||||||
<u-icon v-if="isChooseA&&area===index"
|
<u-icon v-if="isChooseA && area === index" size="17" name="checkbox-mark"></u-icon>
|
||||||
size="17" name="checkbox-mark"></u-icon>
|
|
||||||
</template>
|
</template>
|
||||||
</u-cell>
|
</u-cell>
|
||||||
</u-cell-group>
|
</u-cell-group>
|
||||||
@ -64,188 +54,188 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import provinces from "./province.js";
|
import provinces from "./province.js";
|
||||||
import citys from "./city.js";
|
import citys from "./city.js";
|
||||||
import areas from "./area.js";
|
import areas from "./area.js";
|
||||||
/**
|
/**
|
||||||
* city-select 省市区级联选择器
|
* city-select 省市区级联选择器
|
||||||
* @property {String Number} z-index 弹出时的z-index值（默认1075）
|
* @property {String Number} z-index 弹出时的z-index值（默认1075）
|
||||||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
|
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
|
||||||
* @property {String} default-region 默认选中的地区，中文形式
|
* @property {String} default-region 默认选中的地区，中文形式
|
||||||
* @property {String} default-code 默认选中的地区，编号形式
|
* @property {String} default-code 默认选中的地区，编号形式
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'u-city-select',
|
name: 'u-city-select',
|
||||||
props: {
|
props: {
|
||||||
// 通过双向绑定控制组件的弹出与收起
|
// 通过双向绑定控制组件的弹出与收起
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
||||||
defaultRegion: {
|
defaultRegion: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default () {
|
default() {
|
||||||
return [];
|
return [];
|
||||||
}
|
|
||||||
},
|
|
||||||
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
|
||||||
areaCode: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 是否允许通过点击遮罩关闭Picker
|
|
||||||
maskCloseAble: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 弹出的z-index值
|
|
||||||
zIndex: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
||||||
return {
|
areaCode: {
|
||||||
cityValue: "",
|
type: Array,
|
||||||
isChooseP: false, //是否已经选择了省
|
default() {
|
||||||
province: 0, //省级下标
|
return [];
|
||||||
provinces: provinces,
|
|
||||||
isChooseC: false, //是否已经选择了市
|
|
||||||
city: 0, //市级下标
|
|
||||||
citys: citys[0],
|
|
||||||
isChooseA: false, //是否已经选择了区
|
|
||||||
area: 0, //区级下标
|
|
||||||
areas: areas[0][0],
|
|
||||||
tabsIndex: 0,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
// 是否允许通过点击遮罩关闭Picker
|
||||||
this.init();
|
maskCloseAble: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
},
|
},
|
||||||
computed: {
|
// 弹出的z-index值
|
||||||
isChange() {
|
zIndex: {
|
||||||
return this.tabsIndex > 1;
|
type: [String, Number],
|
||||||
},
|
default: 0
|
||||||
genTabsList() {
|
}
|
||||||
let tabsList = [{
|
},
|
||||||
name: "请选择"
|
data() {
|
||||||
}];
|
return {
|
||||||
if (this.isChooseP) {
|
cityValue: "",
|
||||||
console.log(this.province)
|
isChooseP: false, //是否已经选择了省
|
||||||
tabsList[0]['name'] = this.provinces[this.province]['label'];
|
province: 0, //省级下标
|
||||||
tabsList[1] = {
|
provinces: provinces,
|
||||||
name: "请选择"
|
isChooseC: false, //是否已经选择了市
|
||||||
};
|
city: 0, //市级下标
|
||||||
}
|
citys: citys[0],
|
||||||
if (this.isChooseC) {
|
isChooseA: false, //是否已经选择了区
|
||||||
tabsList[1]['name'] = this.citys[this.city]['label'];
|
area: 0, //区级下标
|
||||||
tabsList[2] = {
|
areas: areas[0][0],
|
||||||
name: "请选择"
|
tabsIndex: 0,
|
||||||
};
|
}
|
||||||
}
|
},
|
||||||
if (this.isChooseA) {
|
mounted() {
|
||||||
tabsList[2]['name'] = this.areas[this.area]['label'];
|
this.init();
|
||||||
}
|
},
|
||||||
return tabsList;
|
computed: {
|
||||||
},
|
isChange() {
|
||||||
uZIndex() {
|
return this.tabsIndex > 1;
|
||||||
// 如果用户有传递z-index值，优先使用
|
},
|
||||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
genTabsList() {
|
||||||
}
|
let tabsList = [{
|
||||||
},
|
name: "请选择"
|
||||||
emits: ['city-change'],
|
}];
|
||||||
methods: {
|
if (this.isChooseP) {
|
||||||
init() {
|
console.log(this.province)
|
||||||
if (this.areaCode.length == 3) {
|
tabsList[0]['name'] = this.provinces[this.province]['label'];
|
||||||
this.setProvince("", this.areaCode[0]);
|
tabsList[1] = {
|
||||||
this.setCity("", this.areaCode[1]);
|
name: "请选择"
|
||||||
this.setArea("", this.areaCode[2]);
|
};
|
||||||
} else if (this.defaultRegion.length == 3) {
|
}
|
||||||
this.setProvince(this.defaultRegion[0], "");
|
if (this.isChooseC) {
|
||||||
this.setCity(this.defaultRegion[1], "");
|
tabsList[1]['name'] = this.citys[this.city]['label'];
|
||||||
this.setArea(this.defaultRegion[2], "");
|
tabsList[2] = {
|
||||||
};
|
name: "请选择"
|
||||||
},
|
};
|
||||||
setProvince(label = "", value = "") {
|
}
|
||||||
this.provinces.map((v, k) => {
|
if (this.isChooseA) {
|
||||||
if (value ? v.value == value : v.label == label) {
|
tabsList[2]['name'] = this.areas[this.area]['label'];
|
||||||
this.provinceChange(k);
|
}
|
||||||
}
|
return tabsList;
|
||||||
})
|
},
|
||||||
},
|
uZIndex() {
|
||||||
setCity(label = "", value = "") {
|
// 如果用户有传递z-index值，优先使用
|
||||||
this.citys.map((v, k) => {
|
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||||
if (value ? v.value == value : v.label == label) {
|
}
|
||||||
this.cityChange(k);
|
},
|
||||||
}
|
emits: ['city-change'],
|
||||||
})
|
methods: {
|
||||||
},
|
init() {
|
||||||
setArea(label = "", value = "") {
|
if (this.areaCode.length == 3) {
|
||||||
this.areas.map((v, k) => {
|
this.setProvince("", this.areaCode[0]);
|
||||||
if (value ? v.value == value : v.label == label) {
|
this.setCity("", this.areaCode[1]);
|
||||||
this.isChooseA = true;
|
this.setArea("", this.areaCode[2]);
|
||||||
this.area = k;
|
} else if (this.defaultRegion.length == 3) {
|
||||||
}
|
this.setProvince(this.defaultRegion[0], "");
|
||||||
})
|
this.setCity(this.defaultRegion[1], "");
|
||||||
},
|
this.setArea(this.defaultRegion[2], "");
|
||||||
close() {
|
};
|
||||||
this.$emit('update:modelValue', false);
|
},
|
||||||
},
|
setProvince(label = "", value = "") {
|
||||||
tabsChange(index) {
|
this.provinces.map((v, k) => {
|
||||||
this.tabsIndex = index;
|
if (value ? v.value == value : v.label == label) {
|
||||||
},
|
this.provinceChange(k);
|
||||||
provinceChange(index) {
|
}
|
||||||
this.isChooseP = true;
|
})
|
||||||
this.isChooseC = false;
|
},
|
||||||
this.isChooseA = false;
|
setCity(label = "", value = "") {
|
||||||
this.province = index;
|
this.citys.map((v, k) => {
|
||||||
this.citys = citys[index];
|
if (value ? v.value == value : v.label == label) {
|
||||||
this.tabsIndex = 1;
|
this.cityChange(k);
|
||||||
},
|
}
|
||||||
cityChange(index) {
|
})
|
||||||
this.isChooseC = true;
|
},
|
||||||
this.isChooseA = false;
|
setArea(label = "", value = "") {
|
||||||
this.city = index;
|
this.areas.map((v, k) => {
|
||||||
this.areas = areas[this.province][index];
|
if (value ? v.value == value : v.label == label) {
|
||||||
this.tabsIndex = 2;
|
this.isChooseA = true;
|
||||||
},
|
this.area = k;
|
||||||
areaChange(index) {
|
}
|
||||||
this.isChooseA = true;
|
})
|
||||||
this.area = index;
|
},
|
||||||
let result = {};
|
close() {
|
||||||
result.province = this.provinces[this.province];
|
this.$emit('update:modelValue', false);
|
||||||
result.city = this.citys[this.city];
|
},
|
||||||
result.area = this.areas[this.area];
|
tabsChange(value) {
|
||||||
this.$emit('city-change', result);
|
this.tabsIndex = value.index;
|
||||||
this.close();
|
console.log('debug=>', this.tabsIndex);
|
||||||
}
|
},
|
||||||
|
provinceChange(index) {
|
||||||
|
this.isChooseP = true;
|
||||||
|
this.isChooseC = false;
|
||||||
|
this.isChooseA = false;
|
||||||
|
this.province = index;
|
||||||
|
this.citys = citys[index];
|
||||||
|
this.tabsIndex = 1;
|
||||||
|
},
|
||||||
|
cityChange(index) {
|
||||||
|
this.isChooseC = true;
|
||||||
|
this.isChooseA = false;
|
||||||
|
this.city = index;
|
||||||
|
this.areas = areas[this.province][index];
|
||||||
|
this.tabsIndex = 2;
|
||||||
|
},
|
||||||
|
areaChange(index) {
|
||||||
|
this.isChooseA = true;
|
||||||
|
this.area = index;
|
||||||
|
let result = {};
|
||||||
|
result.province = this.provinces[this.province];
|
||||||
|
result.city = this.citys[this.city];
|
||||||
|
result.area = this.areas[this.area];
|
||||||
|
this.$emit('city-change', result);
|
||||||
|
this.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.area-box {
|
.area-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 800rpx;
|
height: 800rpx;
|
||||||
|
|
||||||
>view {
|
>view {
|
||||||
width: 150%;
|
width: 150%;
|
||||||
transition: transform 0.3s ease-in-out 0s;
|
transition: transform 0.3s ease-in-out 0s;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
|
||||||
&.change {
|
&.change {
|
||||||
transform: translateX(-33.3333333%);
|
transform: translateX(-33.3333333%);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.area-item {
|
|
||||||
width: 33.3333333%;
|
|
||||||
height: 800rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.area-item {
|
||||||
|
width: 33.3333333%;
|
||||||
|
height: 800rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@/components/u-city-select/province.js@/components/u-city-select/city.js@/components/u-city-select/area.js
|
|
||||||
Loading…
Reference in New Issue
Block a user