uni-app 城市三级联动 二级联动插件需求

针对您提出的uni-app中实现城市三级联动（省、市、区/县）及二级联动插件的需求，以下是一个基于uni-app和Vue.js的示例代码，展示了如何实现这一功能。这里假设您已经创建了一个uni-app项目，并且希望实现一个可复用的城市联动组件。

1. 数据准备

首先，您需要有一个包含所有省、市、区/县数据的JSON文件。这里以cityData.json为例：

[
    {
        "name": "北京市",
        "children": [
            {
                "name": "北京市",
                "children": ["东城区", "西城区", "朝阳区"]
            }
        ]
    },
    {
        "name": "浙江省",
        "children": [
            {
                "name": "杭州市",
                "children": ["上城区", "下城区", "江干区"]
            },
            {
                "name": "宁波市",
                "children": ["海曙区", "江东区", "江北区"]
            }
        ]
    }
    // 更多省份及城市数据...
]

2. 创建城市联动组件

在components目录下创建一个名为CityPicker.vue的组件：

<template>
    <view>
        <picker mode="selector" :range="provinces" @change="onProvinceChange">
            <view class="picker">{{ selectedProvince }}</view>
        </picker>
        <picker mode="selector" :range="cities" :disabled="!cities.length" @change="onCityChange">
            <view class="picker">{{ selectedCity }}</view>
        </picker>
        <picker mode="selector" :range="districts" :disabled="!districts.length" @change="onDistrictChange">
            <view class="picker">{{ selectedDistrict }}</view>
        </picker>
    </view>
</template>

<script>
import cityData from '@/static/cityData.json';

export default {
    data() {
        return {
            provinces: [],
            cities: [],
            districts: [],
            selectedProvince: '',
            selectedCity: '',
            selectedDistrict: ''
        };
    },
    mounted() {
        this.provinces = cityData.map(province => province.name);
        this.onProvinceChange(0); // 默认选中第一个省份
    },
    methods: {
        onProvinceChange(e) {
            const province = cityData[e];
            this.cities = province.children.map(city => city.name);
            this.onCityChange(0); // 默认选中第一个城市
        },
        onCityChange(e) {
            const province = cityData[this.provinces.indexOf(this.selectedProvince)];
            const city = province.children[e];
            this.districts = city.children;
            this.onDistrictChange(0); // 默认选中第一个区县
        },
        onDistrictChange(e) {
            this.selectedDistrict = this.districts[e];
        }
    }
};
</script>

3. 使用组件

在您的页面中使用该组件：

<template>
    <view>
        <CityPicker />
    </view>
</template>

<script>
import CityPicker from '@/components/CityPicker.vue';

export default {
    components: {
        CityPicker
    }
};
</script>

以上代码提供了一个基础的城市三级联动组件，您可以根据实际需求进行扩展和优化，比如添加样式、处理异常情况等。