更新记录

1.0.2（2025-03-10） 下载此版本

修复一些样式问题 添加回显时选中对应选项的样式

1.0.1（2025-03-10） 下载此版本

修复一些样式问题 添加回显时选中对应选项的样式

1.0.0（2025-03-08） 下载此版本

此版本不支持Uniapp X 使用Vue3编写 Vue2不确定是否支持 请自行测试

平台兼容性

本组件依赖uni-popup / uni-icons 如有需要请自行替换

组件只支持异步加载 不支持JSON文件 主要使用场景为地区选择器，也可用于其他类型的上下级选择器

Props

Event

示例

<template>
    <view style="padding: 20px">
        <xsd-areapicker :load="areaLoad" labelKey="name" valueKey="id" activeColor="#A7F000" :defaultLoad="defaultLoad" @change="areaChange">
            <view style="border: 1px solid #ddd; padding: 20rpx;">
                {{ changeLabel || '请选择' }}
            </view>
        </xsd-areapicker>
        <view>
            已选择的数据Label1：<br>{{ changeLabel }}
        </view>
        <view>
            已选择的数据Value1：<br>{{ changeValue }}
        </view>

        <xsd-areapicker :load="areaLoad" labelKey="name" valueKey="id" activeColor="#000000" @change="areaChange1">
            <view style="border: 1px solid #ddd; padding: 20rpx;">
                {{ changeLabel1 || '请选择' }}
            </view>
        </xsd-areapicker>
        <view>
            已选择的数据Label1：<br>{{ changeLabel1 }}
        </view>
        <view>
            已选择的数据Value1：<br>{{ changeValue1 }}
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    const changeLabel = ref('辽宁省1大连市1区县1街道1五级1');
    const changeValue = ref<string[]>(['1', '11', '111', '1111', '11111']);

    const changeLabel1 = ref('');
    const changeValue1 = ref<string[]>([]);

    type DataType = {
        id : string;
        name : string;
    }

    const loadApi = async (e ?: DataType) => {
        return new Promise((reslove) => {
            setTimeout(() => {
                console.log(e);
                if (!e) {
                    reslove({
                        key: '请选择省份/地区',
                        list: [{ id: '1', name: '辽宁省1' }, { id: '2', name: '辽宁省2' }, { id: '3', name: '辽宁省3' }, { id: '4', name: '辽宁省4' }, { id: '5', name: '辽宁省5' }, { id: '1', name: '辽宁省1' }, { id: '2', name: '辽宁省2' }, { id: '3', name: '辽宁省3' }, { id: '4', name: '辽宁省4' }, { id: '5', name: '辽宁省5' }, { id: '1', name: '辽宁省1' }, { id: '2', name: '辽宁省2' }, { id: '3', name: '辽宁省3' }, { id: '4', name: '辽宁省4' }, { id: '5', name: '辽宁省5' }, { id: '1', name: '辽宁省1' }, { id: '2', name: '辽宁省2' }, { id: '3', name: '辽宁省3' }, { id: '4', name: '辽宁省4' }, { id: '5', name: '辽宁省5' }, { id: '1', name: '辽宁省1' }, { id: '2', name: '辽宁省2' }, { id: '3', name: '辽宁省3' }, { id: '4', name: '辽宁省4' }, { id: '5', name: '辽宁省5' }, { id: '1', name: '辽宁省1' }, { id: '2', name: '辽宁省2' }, { id: '3', name: '辽宁省3' }, { id: '4', name: '辽宁省4' }, { id: '5', name: '辽宁省5' }, { id: '1', name: '辽宁省1' }, { id: '2', name: '辽宁省2' }, { id: '3', name: '辽宁省3' }, { id: '4', name: '辽宁省4' }, { id: '5', name: '辽宁省5' }]
                    })
                    return;
                }

                if (e!.id.length === 1) {
                    reslove({
                        key: '请选择城市',
                        list: [{ id: '11', name: '大连市1' }, { id: '12', name: '大连市2' }, { id: '13', name: '大连市3' }, { id: '14', name: '大连市4' }, { id: '15', name: '大连市5' }, { id: '11', name: '大连市1' }, { id: '12', name: '大连市2' }, { id: '13', name: '大连市3' }, { id: '14', name: '大连市4' }, { id: '15', name: '大连市5' }, { id: '11', name: '大连市1' }, { id: '12', name: '大连市2' }, { id: '13', name: '大连市3' }, { id: '14', name: '大连市4' }, { id: '15', name: '大连市5' }, { id: '11', name: '大连市1' }, { id: '12', name: '大连市2' }, { id: '13', name: '大连市3' }, { id: '14', name: '大连市4' }, { id: '15', name: '大连市5' }, { id: '11', name: '大连市1' }, { id: '12', name: '大连市2' }, { id: '13', name: '大连市3' }, { id: '14', name: '大连市4' }, { id: '15', name: '大连市5' }, { id: '11', name: '大连市1' }, { id: '12', name: '大连市2' }, { id: '13', name: '大连市3' }, { id: '14', name: '大连市4' }, { id: '15', name: '大连市5' }]
                    })
                    return;
                }

                if (e!.id.length === 2) {
                    reslove({
                        key: '请选择区县',
                        list: [{ id: '111', name: '区县1' }, { id: '112', name: '区县2' }, { id: '113', name: '区县3' }, { id: '114', name: '区县4' }, { id: '115', name: '区县5' }, { id: '111', name: '区县1' }, { id: '112', name: '区县2' }, { id: '113', name: '区县3' }, { id: '114', name: '区县4' }, { id: '115', name: '区县5' }, { id: '111', name: '区县1' }, { id: '112', name: '区县2' }, { id: '113', name: '区县3' }, { id: '114', name: '区县4' }, { id: '115', name: '区县5' }, { id: '111', name: '区县1' }, { id: '112', name: '区县2' }, { id: '113', name: '区县3' }, { id: '114', name: '区县4' }, { id: '115', name: '区县5' }, { id: '111', name: '区县1' }, { id: '112', name: '区县2' }, { id: '113', name: '区县3' }, { id: '114', name: '区县4' }, { id: '115', name: '区县5' }, { id: '111', name: '区县1' }, { id: '112', name: '区县2' }, { id: '113', name: '区县3' }, { id: '114', name: '区县4' }, { id: '115', name: '区县5' }]
                    })
                    return;
                }

                if (e!.id.length === 3) {
                    reslove({
                        key: '请选择街道',
                        list: [{ id: '1111', name: '街道1' }, { id: '1112', name: '街道2' }, { id: '1113', name: '街道3' }, { id: '1114', name: '街道4' }, { id: '1115', name: '街道5' }, { id: '1111', name: '街道1' }, { id: '1112', name: '街道2' }, { id: '1113', name: '街道3' }, { id: '1114', name: '街道4' }, { id: '1115', name: '街道5' }, { id: '1111', name: '街道1' }, { id: '1112', name: '街道2' }, { id: '1113', name: '街道3' }, { id: '1114', name: '街道4' }, { id: '1115', name: '街道5' }, { id: '1111', name: '街道1' }, { id: '1112', name: '街道2' }, { id: '1113', name: '街道3' }, { id: '1114', name: '街道4' }, { id: '1115', name: '街道5' }, { id: '1111', name: '街道1' }, { id: '1112', name: '街道2' }, { id: '1113', name: '街道3' }, { id: '1114', name: '街道4' }, { id: '1115', name: '街道5' }]
                    })
                    return;
                }

                if (e!.id.length === 4) {
                    reslove({
                        key: '请选择五级',
                        list: [{ id: '11111', name: '五级1' }, { id: '11112', name: '五级2' }, { id: '11113', name: '五级3' }, { id: '11114', name: '五级4' }, { id: '11115', name: '五级5' }, { id: '11111', name: '五级1' }, { id: '11112', name: '五级2' }, { id: '11113', name: '五级3' }, { id: '11114', name: '五级4' }, { id: '11115', name: '五级5' }, { id: '11111', name: '五级1' }, { id: '11112', name: '五级2' }, { id: '11113', name: '五级3' }, { id: '11114', name: '五级4' }, { id: '11115', name: '五级5' }, { id: '11111', name: '五级1' }, { id: '11112', name: '五级2' }, { id: '11113', name: '五级3' }, { id: '11114', name: '五级4' }, { id: '11115', name: '五级5' }, { id: '11111', name: '五级1' }, { id: '11112', name: '五级2' }, { id: '11113', name: '五级3' }, { id: '11114', name: '五级4' }, { id: '11115', name: '五级5' }, { id: '11111', name: '五级1' }, { id: '11112', name: '五级2' }, { id: '11113', name: '五级3' }, { id: '11114', name: '五级4' }, { id: '11115', name: '五级5' }]
                    })
                    return;
                }

                //  没有下级数据了
                reslove(undefined);
            }, 100);
        })
    }

    const areaLoad = async (e ?: DataType) => {
        return await loadApi(e);
    }

    const areaChange = (e : DataType[]) => {
        changeValue.value = [];
        changeLabel.value = "";
        e.forEach(a => {
            changeValue.value.push(a.id);
            changeLabel.value = changeLabel.value += a.name;
        })
    }

    const areaChange1 = (e : DataType[]) => {
        changeValue1.value = [];
        changeLabel1.value = "";
        e.forEach(a => {
            changeValue1.value.push(a.id);
            changeLabel1.value = changeLabel.value += a.name;
        })
    }

    const defaultLoad = () => {
        return [{ id: '1', name: '辽宁省1' }, { id: '11', name: '大连市1' }, { id: '111', name: '区县1' }, { id: '1111', name: '街道1' }, { id: '11111', name: '五级1' }];
    }
</script>

<style>

</style>