更新记录

V1.2（2026-03-26） 下载此版本

1. 修改组件名称，采用小驼峰模式
   
2. 增加边框和内边距是否显示的配置项
3. 优化默认地址的设置，已支持仅传递省市区名称，且兼容仅传递名称和传递code+name的模式
4. 修复同页面多次复用组件导致默认地址显示没有切换的问题

V1.0（2026-03-26） 下载此版本

1.0.0（2026-03-26）

插件初始化

平台兼容性

uni-app(3.7.3)

其他

基于国家官方数据的动态省市区三级联动选择器，支持按需加载、直辖市自动处理，适用于 uni-app 项目（Vue 3 + setup 语法）。

安装与引入

1. 组件文件

将组件代码下载导入项目的 components 目录（或任意你习惯的位置）。

2. 在页面中引入

<script setup>
import moycL3addressGov from '@/components/moycL3addressGov.vue'
</script>

基本用法

<template>
  <view>
    <moycL3addressGov 
      :level="3"
      :defaultValue="defaultAddress"
      @confirm="handleConfirm"
      placeholder="请选择省市区"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import moycL3addressGov from '@/components/moycL3addressGov.vue'

const defaultAddress = ref([
  { code: '440000000000', name: '广东省' },
  { code: '440100000000', name: '广州市' },
  { code: '440105000000', name: '海珠区' }
])

// 或者 const defaultAddress = ref(['陕西省','西安市','莲湖区']) 这样[省,市,区]仅传递name

const handleConfirm = (address) => {
  console.log('选中的地址：', address)
}
</script>

Props 属性

defaultValue 示例

// 省模式
defaultValue: [{ code: '440000000000', name: '广东省' }]

// 省市模式
defaultValue: [
  { code: '440000000000', name: '广东省' },
  { code: '440100000000', name: '广州市' }
]

// 省市区模式
defaultValue: [
  { code: '440000000000', name: '广东省' },
  { code: '440100000000', name: '广州市' },
  { code: '440105000000', name: '海珠区' }
]

// 也支持仅传递名称
const defaultAddress = ref(['陕西省','西安市','莲湖区'])

Events 事件

address 返回格式

[
  { code: '440000000000', name: '广东省' },
  { code: '440100000000', name: '广州市' },
  { code: '440105000000', name: '海珠区' }
]

完整示例

<template>
  <view class="demo-container">
    <moycL3addressGov 
      :level="3"
      @confirm="onAddressConfirm"
      @change="onAddressChange"
    />

    <view class="result" v-if="selected">
      <text>已选地址：{{ selectedText }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import moycL3addressGov from '@/components/moycL3addressGov.vue'

const selected = ref([])

const selectedText = computed(() => {
  return selected.value.map(item => item.name).join('/')
})

const onAddressConfirm = (address) => {
  selected.value = address
  console.log('确认的地址：', address)
}

const onAddressChange = (address) => {
  console.log('地址变化：', address)
}
</script>

注意事项

微信小程序域名配置 若项目为微信小程序，需在 微信公众平台 -> 开发 -> 开发设置 -> 服务器域名 中添加合法请求域名： https://dmfw.mca.gov.cn

H5 跨域问题

国家接口未配置 CORS，H5 环境下会触发跨域错误。解决方案：

使用 uni-app 的 uniCloud 云函数转发请求

配置本地代理（开发环境）或使用 nginx 反向代理

接口依赖

组件依赖国家接口，请确保网络通畅。接口返回数据中，直辖市的 children 直接为区县（level=3），组件已做自动适配。

数据更新

国家数据会随国家行政区划调整更新，接口数据实时，无需手动维护。

性能优化

组件采用按需加载，仅请求必要数据，减轻小程序包体积和网络开销。

常见问题

Q：为什么直辖市只显示省和区，没有市？
A：直辖市的行政区划中不存在“市”这一级，组件已自动处理，跳过市级选择，直接展示区县。

Q：如何获取完整的地区代码（如用于提交表单）？
A：confirm 事件返回的对象中包含 code 字段（12位行政区划代码），可直接用于后端存储。

Q：可以支持乡镇/街道级吗？
A：目前接口支持四级查询（maxLevel 参数），可根据需要扩展组件，增加第四列。