ldeyun/ruoyi-geek-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

城市选择器bug修复

Browse Source
This commit is contained in:
D 2023-12-03 15:44:15 +08:00
parent fc0ced0927
commit c17c852a1f
1 changed files with 187 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/u-city-select/u-city-select.vue
View File

@ -1,23 +1,19 @@
<template>
<u-popup :show="modelValue" mode="bottom" :popup="false"
:mask="true" :closeable="true" :safe-area-inset-bottom="true"
close-icon-color="#ffffff" :z-index="uZIndex"
:maskCloseAble="maskCloseAble" @close="close">
<u-tabs v-if="modelValue" :list="genTabsList"
:scrollable="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
<u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
ref="tabs" />
<view class="area-box">
<view class="u-flex" :class="{ 'change':isChange }">
<view class="u-flex" :class="{ 'change': isChange }">
<view class="area-item">
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
<scroll-view :scroll-y="true" style="height: 100%">
<u-cell-group>
<u-cell v-for="(item,index) in provinces"
:title="item.label" :arrow="false"
:index="index" :key="index"
@click="provinceChange(index)">
<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false" :index="index"
:key="index" @click="provinceChange(index)">
<template v-slot:right-icon>
<u-icon v-if="isChooseP&&province===index"
size="17" name="checkbox-mark"></u-icon>
<u-icon v-if="isChooseP && province === index" size="17"
name="checkbox-mark"></u-icon>
</template>
</u-cell>
</u-cell-group>
@ -28,13 +24,10 @@
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
<scroll-view :scroll-y="true" style="height: 100%">
<u-cell-group v-if="isChooseP">
<u-cell v-for="(item,index) in citys"
:title="item.label" :arrow="false"
:index="index" :key="index"
@click="cityChange(index)">
<u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
:key="index" @click="cityChange(index)">
<template v-slot:right-icon>
<u-icon v-if="isChooseC&&city===index"
size="17" name="checkbox-mark"></u-icon>
<u-icon v-if="isChooseC && city === index" size="17" name="checkbox-mark"></u-icon>
</template>
</u-cell>
</u-cell-group>
@ -45,13 +38,10 @@
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
<scroll-view :scroll-y="true" style="height: 100%">
<u-cell-group v-if="isChooseC">
<u-cell v-for="(item,index) in areas"
:title="item.label" :arrow="false"
:index="index" :key="index"
@click="areaChange(index)">
<u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
:key="index" @click="areaChange(index)">
<template v-slot:right-icon>
<u-icon v-if="isChooseA&&area===index"
size="17" name="checkbox-mark"></u-icon>
<u-icon v-if="isChooseA && area === index" size="17" name="checkbox-mark"></u-icon>
</template>
</u-cell>
</u-cell-group>
@ -64,17 +54,17 @@
</template>
<script>
import provinces from "./province.js";
import citys from "./city.js";
import areas from "./area.js";
/**
import provinces from "./province.js";
import citys from "./city.js";
import areas from "./area.js";
/**
* city-select 省市区级联选择器
* @property {String Number} z-index 弹出时的z-index值（默认1075）
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String} default-region 默认选中的地区，中文形式
* @property {String} default-code 默认选中的地区，编号形式
*/
export default {
export default {
name: 'u-city-select',
props: {
// 通过双向绑定控制组件的弹出与收起
@ -85,14 +75,14 @@
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
defaultRegion: {
type: Array,
default () {
default() {
return [];
}
},
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
areaCode: {
type: Array,
default () {
default() {
return [];
}
},
@ -194,8 +184,9 @@
close() {
this.$emit('update:modelValue', false);
},
tabsChange(index) {
this.tabsIndex = index;
tabsChange(value) {
this.tabsIndex = value.index;
console.log('debug=>', this.tabsIndex);
},
provinceChange(index) {
this.isChooseP = true;
@ -224,10 +215,10 @@
}
}
}
}
</script>
<style lang="scss">
.area-box {
.area-box {
width: 100%;
overflow: hidden;
height: 800rpx;
@ -246,6 +237,5 @@
width: 33.3333333%;
height: 800rpx;
}
}
}
</style>
@/components/u-city-select/province.js@/components/u-city-select/city.js@/components/u-city-select/area.js