更新记录

1.0.0（2026-04-10） 下载此版本

初始化

平台兼容性

uni-app(4.85)

uni-app x(4.85)

address-picker 省市区地址选择器

组件简介

一个省市区三级联动地址选择器，支持回显、支持默认选中、支持展示选中的历史地址、支持搜索任意层级。搜索选中后自动进入下一级选择（搜省→选市→选区，搜市→选区，选区→直接确认），并输出完整的省市区编码和名称。

平台兼容性

属性 Props

事件 Events

方法 Methods

使用示例 dome

基础用法

 <template>
    <view>
        <view @click="showPicker = true">
            {{ selectedAddress || '请选择地址' }}
        </view>
        <address-picker
            v-model="showPicker"
            :address-data="areaData"
            @confirm="onConfirm"
        />
    </view>
 </template>

 <script setup>
 import { ref } from 'vue'
import addressPicker from '@/uni_modules/dl-address-picker/components/dl-address-picker/dl-address-picker.vue'

const areaData = ref([
  {
    "code": "110000",
    "name": "北京市",
    "children": [
      {
        "code": "110100",
        "name": "市辖区",
        "children": [
          { "code": "110101", "name": "东城区", },
          { "code": "110102", "name": "西城区" },
          { "code": "110105", "name": "朝阳区" },
          { "code": "110106", "name": "丰台区" },
          { "code": "110107", "name": "石景山区" },
          { "code": "110108", "name": "海淀区" }
        ]
      }
    ]
  },
  {
    "code": "310000",
    "name": "上海市",
    "children": [
      {
        "code": "310100",
        "name": "市辖区",
        "children": [
          { "code": "310101", "name": "黄浦区" },
          { "code": "310104", "name": "徐汇区" },
          { "code": "310105", "name": "长宁区" },
          { "code": "310106", "name": "静安区" },
          { "code": "310107", "name": "普陀区" }
        ]
      }
    ]
  },
  {
    "code": "440000",
    "name": "广东省",
    "children": [
      {
        "code": "440100",
        "name": "广州市",
        "children": [
          { "code": "440103", "name": "荔湾区" },
          { "code": "440104", "name": "越秀区" },
          { "code": "440105", "name": "海珠区" },
          { "code": "440106", "name": "天河区" }
        ]
      },
      {
        "code": "440300",
        "name": "深圳市",
        "children": [
          { "code": "440303", "name": "罗湖区" },
          { "code": "440304", "name": "福田区" },
          { "code": "440305", "name": "南山区" },
          { "code": "440306", "name": "宝安区" }
        ]
      }
    ]
  }
])

 const showPicker = ref(false)
 const selectedAddress = ref('')

 const onConfirm = (data) => {
    selectedAddress.value = data.fullName
    console.log(data)
 }
 </script>

---

### 基础用法

回显地址

 <template>
    <view>
        <view @click="showPicker = true">
            {{ getAddressByCodes(areaData,['110000','110100','110101']) || '请选择地址' }}
        </view>
        <address-picker
            ref="addressPickerRef"
            v-model="showPicker"
            :address-data="areaData"
            @confirm="onConfirm"
        />
    </view>
 </template>

 <script setup>
 import { ref } from 'vue'
import addressPicker,{getAddressByCodes} from '@/uni_modules/dl-address-picker/components/dl-address-picker/dl-address-picker.vue'
const addressPickerRef = ref(null);
const areaData = ref([
  {
    "code": "110000",
    "name": "北京市",
    "children": [
      {
        "code": "110100",
        "name": "市辖区",
        "children": [
          { "code": "110101", "name": "东城区", },
          { "code": "110102", "name": "西城区" },
          { "code": "110105", "name": "朝阳区" },
          { "code": "110106", "name": "丰台区" },
          { "code": "110107", "name": "石景山区" },
          { "code": "110108", "name": "海淀区" }
        ]
      }
    ]
  },
  {
    "code": "310000",
    "name": "上海市",
    "children": [
      {
        "code": "310100",
        "name": "市辖区",
        "children": [
          { "code": "310101", "name": "黄浦区" },
          { "code": "310104", "name": "徐汇区" },
          { "code": "310105", "name": "长宁区" },
          { "code": "310106", "name": "静安区" },
          { "code": "310107", "name": "普陀区" }
        ]
      }
    ]
  },
  {
    "code": "440000",
    "name": "广东省",
    "children": [
      {
        "code": "440100",
        "name": "广州市",
        "children": [
          { "code": "440103", "name": "荔湾区" },
          { "code": "440104", "name": "越秀区" },
          { "code": "440105", "name": "海珠区" },
          { "code": "440106", "name": "天河区" }
        ]
      },
      {
        "code": "440300",
        "name": "深圳市",
        "children": [
          { "code": "440303", "name": "罗湖区" },
          { "code": "440304", "name": "福田区" },
          { "code": "440305", "name": "南山区" },
          { "code": "440306", "name": "宝安区" }
        ]
      }
    ]
  }
])

 const showPicker = ref(false)
 const selectedAddress = ref('')

 const onConfirm = (data) => {
    selectedAddress.value = data.fullName
    console.log(data)
 }
   //或者通过ref获取,返回全路径地址  addressPickerRef.value.getAddressByCodes(['110000','110100','110101'])

 </script>

---