更新记录

1.0.3（2024-11-04） 下载此版本

优化代码

1.0.2（2024-11-04） 下载此版本

优化

1.0.1（2024-11-01） 下载此版本

优化更新

平台兼容性

●组件模板效果图：

效果图见右侧图片；

●组件模板费用：

学习：免费下载；

●组件模板费用：

商用：本页面地址赞赏5元后，可终身商用；

uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板

合集地址:如查看全部页面模板，请前往上述uniapp插件市场合集地址；

技术公众号(私信加前端技术群)

欢迎大家一起探讨前端知识。

使用方法

    <c-city
        :province="addressData.province"
        :city="addressData.city"
        :area="addressData.area"
        :show="showPicker"
        @updateSelection="handleUpdateSelection"
        @confirm="confirmSelection"
        @cancel="closePicker"
    ></c-city>

实现部分代码

<template>
    <view>
        <view v-if="isVisible" class="overlay"></view>
        <view :class="['picker-container', isVisible ? 'slide-up' : 'slide-down']">
            <view class="picker-actions">
                <text class="btn-cancel" @tap="cancelSelection">取消</text>
                <text class="btn-confirm" @tap="confirmSelection">确定</text>
            </view>
            <picker-view class="picker-view" :value="pickerValue" @change="handlePickerChange">
                <picker-view-column>
                    <view v-for="(province, index) in provinces" :key="index" class="picker-item">{{ province }}</view>
                </picker-view-column>
                <picker-view-column>
                    <view v-for="(city, index) in cities" :key="index" class="picker-item">{{ city }}</view>
                </picker-view-column>
                <picker-view-column>
                    <view v-for="(area, index) in areas" :key="index" class="picker-item">{{ area }}</view>
                </picker-view-column>
            </picker-view>
        </view>
    </view>
</template>

<script>
    import AreaData from "./area.js";

    export default {
        data() {
            return {
                provinces: [],
                cities: [],
                areas: [],
                pickerValue: [0, 0, 0],
                isVisible: false
            };
        },
        props: {
            province: { type: String, default: '' },
            city: { type: String, default: '' },
            area: { type: String, default: '' },
            show: { type: Boolean, default: false }
        },
        watch: {
            province: 'initializePicker',
            city: 'initializePicker',
            area: 'initializePicker',
            show(newVal) {
                this.isVisible = newVal;
            }
        },
        mounted() {
            this.loadProvinces();
            this.initializePicker();
        },
        methods: {
            loadProvinces() {
                this.provinces = AreaData.map(province => province.name);
            },
            loadCities(provinceIndex) {
                this.cities = AreaData[provinceIndex]?.city.map(city => city.name) || [];
            },
            loadAreas(provinceIndex, cityIndex) {
                this.areas = AreaData[provinceIndex]?.city[cityIndex]?.area.map(area => area.name) || [];
            },
            initializePicker() {
                const provinceIndex = this.provinces.indexOf(this.province);
                this.loadCities(provinceIndex);
                const cityIndex = this.cities.indexOf(this.city);
                this.loadAreas(provinceIndex, cityIndex);
                const areaIndex = this.areas.indexOf(this.area);
                this.pickerValue = [provinceIndex, cityIndex, areaIndex];
            },
            handlePickerChange(e) {
                const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
                this.loadCities(provinceIndex);
                this.loadAreas(provinceIndex, cityIndex);
                this.pickerValue = [provinceIndex, cityIndex, areaIndex];
                const selectedProvince = this.provinces[provinceIndex];
                const selectedCity = this.cities[cityIndex];
                const selectedArea = this.areas[areaIndex];
                const areaCode = AreaData[provinceIndex]?.city[cityIndex]?.area[areaIndex]?.id || '';
                this.$emit('updateSelection', { province: selectedProvince, city: selectedCity, area: selectedArea, areaCode });
            },
            confirmSelection() {
                this.$emit('confirm', {
                    province: this.provinces[this.pickerValue[0]],
                    city: this.cities[this.pickerValue[1]],
                    area: this.areas[this.pickerValue[2]]
                });
                this.isVisible = false;
            },
            cancelSelection() {
                this.$emit('cancel');
                this.isVisible = false;
            }
        }
    };
</script>

<style scoped>
    .overlay {
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .picker-container {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        transition: all 0.3s;
        z-index: 11;
    }

    .picker-view {
        height: 250px;
        width: 100%;
    }

    .picker-item {
        text-align: center;
        font-size: 16px;
    }

    .picker-actions {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        border-bottom: 1px solid #eee;
        background-color: #f8f8f8;
    }

    .btn-cancel,
    .btn-confirm {
        font-size: 16px;
        color: #007aff;
        cursor: pointer;
    }

    .slide-up {
        bottom: 0;
    }

    .slide-down {
        bottom: -300px;
    }
</style>