更新记录

1.1.0（2025-09-12） 下载此版本

完善v-model,移除defaultAreaText

1.0.0（2025-09-02） 下载此版本

111

平台兼容性

1. 地区选择插件使用说明

   简介

   本插件是基于 uni-app 的多级地区选择器，支持省、市、区（县）、乡镇的 3 级和 4 级联动，适用于表单、地址填写等场景。支持 v-model 双向绑定。

   ---

   安装

   1. 在 uni-app 插件市场 搜索本插件并下载。
   2. 插件将自动安装在项目的 uni_modules 目录下。

   ---

   引用方式

   无需全局注册，直接在页面或组件中引用即可！

   1. 模板使用

   <template>
    <yzb-AreaPicker v-model="address" />
   </template>

   ---

   属性说明

   属性名	类型	默认值	说明
   v-model/modelValue	String/Number/Object	''	选中的地区内容
   treeArr	Array	area.js	地区数据源（树结构）
   level	Number	4	联动层级，支持 3 或 4

事件说明

使用示例

基础用法

   <template>
    <yzb-AreaPicker></yzb-AreaPicker>
</template>

四级联动

   <yzb-AreaPicker v-model="address" :level="4" />

监听确认事件

   <yzb-AreaPicker v-model="address" @confirm="onAreaConfirm" />

   methods: {
     onAreaConfirm(data) {
       // data: { province, city, county, town, fullName, code }
    console.log('选择的数据：', data)
     }
}

特别说明

• 插件安装后组件路径应为 @/uni_modules/complex-area-picker/components/ComplexAreaPicker.vue，不是 components/ 目录。
• 地区数据源建议直接引用插件自带的 area.js：@/uni_modules/complex-area-picker/area.js

• v-model 绑定的变量必须是响应式变量。

  • 如需自定义样式，可通过覆盖类名如 .picker-input、.area-popup 等实现。

  ---

  常见问题

  1. 为什么 v-model 没有显示选中内容？

     • 请确保外部传入的变量是响应式的。
     • 检查 modelValue 是否正确传递。

  2. 如何初始化组件选中内容？

• 直接给 v-model 绑定变量赋初值即可。

更新日志

• v1.0.0: 首发，支持三级/四级地区选择，支持 v-model，适配 uni_modules 目录。

  ---

  联系与反馈

  如有问题或建议，请在插件市场页面或项目仓库下提 issue。