更新记录

1.0.4（2026-04-07） 下载此版本

热门城市改为城市名称匹配即可（如北京市可写为北京）

1.0.3（2026-04-07） 下载此版本

1.仿淘宝模式增加热门城市，支持传入hotCities（城市名称的数组） 2.修复普通模式下初始化展示问题

1.0.2（2026-04-07） 下载此版本

修复仿淘宝模式下传入已选择值的不正常回显问题

平台兼容性

uni-app(3.7.3)

uni-app x(3.7.3)

省市区县四级联动选择器

一个基于uni-app开发的省市区县四级联动选择器组件，支持多种样式和多端兼容。

功能特点

1. 四级联动：支持省市区县四级选择，可通过参数控制显示三级或四级
2. 两种样式：
   • Picker样式：滚轮式选择器，类似原生选择器
   • 仿淘宝样式：标签页式依次选取
3. 数据来源：从本地JSON文件获取可靠的省市区县数据
   • 三级联动数据：pca-code.js
   • 四级联动数据：pcas-code.js
4. 多端兼容：基于uni-app开发，支持H5、小程序、App等多平台
5. 自定义弹窗：不依赖其他组件库，实现了自定义弹窗效果
6. 动画效果：从底部向上弹出的平滑动画
7. 可定制性：支持自定义标题、按钮颜色等

安装方法

本组件符合 easycom 规范，HBuilderX 2.5.5 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components。

使用示例

基本使用

<template>
  <view>
    <view class="trigger-button" @click="showPicker = true">
      选择地区
    </view>
    <yc-address-picker 
      v-model="showPicker"
      :level="4"
      mode="picker"
      @confirm="onConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false
    };
  },
  methods: {
    onConfirm(result) {
      console.log('选择结果:', result);
    }
  }
};
</script>

<style scoped>
.trigger-button {
  padding: 20rpx;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 8rpx;
  margin: 20rpx;
}
</style>

自定义按钮颜色和激活颜色

<yc-address-picker 
  v-model="showPicker"
  :level="3"
  :mode="'taobao'"
  :cancel-color="'#999'"
  :confirm-color="'#ff6600'"
  :active-color="'#ff6600'"
  @confirm="onConfirm"
/>

自定义热门城市

<yc-address-picker 
  v-model="showPicker"
  :level="3"
  :mode="'taobao'"
  :hot-cities="['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安', '南京', '重庆']"
  @confirm="onConfirm"
/>

参数说明

事件说明

数据结构

选择结果对象结构

{
  province: { code: '110000', name: '北京市' },
  city: { code: '110100', name: '北京市' },
  district: { code: '110101', name: '东城区' },
  town: { code: '110101001', name: '东华门街道' } // 四级时才有
}

注意事项

1. 多端兼容：组件使用了uni-app的跨平台能力，可在不同平台上正常运行
2. 动画效果：组件添加了从底部向上弹出的动画效果，提供更好的用户体验
3. 淘宝模式高度：淘宝模式的高度会根据屏幕高度自动调整，最高为屏幕高度的70%

浏览器兼容性

• H5：支持所有现代浏览器
• 小程序：支持微信小程序、支付宝小程序等
• App：支持iOS和Android

版本说明

• v1.0.0：初始版本，支持省市区县四级联动选择，两种样式，多端兼容