更新记录

1.0.0（2026-04-08）

• 初始版本发布
• 实现三级联动地址选择功能
• 添加搜索功能，支持按省市区名称搜索
• 实现弹窗式设计，带有平滑的动画效果
• 支持响应式布局，适配不同屏幕尺寸
• 支持底部安全区域适配
• 使用pca-code.json作为城市数据源
• 优化返回数据结构，只返回省市区的code和name

平台兼容性

uni-app(3.7.3)

其他

地址选择器插件

带搜索功能的三级联动地址选择器弹窗，支持省市区三级选择。

功能特点

• 三级联动选择：支持省份、城市、区县三级选择
• 搜索功能：支持按名称搜索城市
• 弹窗式设计：底部弹出的选择器，使用体验良好
• 响应式布局：适配不同屏幕尺寸
• 支持uni-app：使用vue格式开发，兼容所有uni-app项目

安装方法

方式一：从插件市场安装

在uni-app插件市场搜索"地址选择器"，找到本插件并点击"导入插件"。

方式二：手动安装

1. 下载插件代码
2. 将address-picker-plus目录复制到项目的components目录下

使用方法

1. 注册组件

在页面的script部分导入组件：

import AddressPicker from '@/components/address-picker-plus/address-picker-plus.vue';

2. 在模板中使用

<template>
  <view>
    <view>{{ addressStr }}</view>
    <button @click="showPicker = true">选择地址</button>

    <!-- 地址选择器组件 -->
    <AddressPicker 
      :show="showPicker" 
      @cancel="showPicker = false" 
      @confirm="handleConfirm"
    />
  </view>
</template>

3. 处理事件

<script setup>
import { ref } from 'vue';
import AddressPicker from '@/components/address-picker-plus/address-picker-plus.vue';

const addressStr = ref('');
const showPicker = ref(false);

// 处理确认选择
const handleConfirm = (address) => {
  addressStr.value = address.fullAddress;
  showPicker.value = false;
  console.log('选择的地址:', address);
};
</script>

API

属性

事件

数据结构

确认选择时返回的地址对象结构：

{
  province: {
    code: "11",
    name: "北京市"
  },
  city: {
    code: "1101",
    name: "市辖区"
  },
  district: {
    code: "110101",
    name: "东城区"
  },
  fullAddress: "北京市 市辖区 东城区"
}

城市数据

城市数据存储在pca-code.json文件中，包含了全国各省市县的三级数据。

注意事项

• 本插件使用uni-app的vue格式开发，支持所有uni-app项目
• 搜索功能仅支持按名称搜索，不支持拼音搜索

版本更新

v1.0.0

• 初始版本
• 实现三级联动地址选择
• 支持搜索功能
• 弹窗式设计