更新记录

2.0.0（2025-07-09） 下载此版本

发布vue3版本，vue2版本不变，示例工程中 为vue3版用法

1.0.0（2025-07-05） 下载此版本

版本发布

平台兼容性

uni-app(4.06)

vshare-address-picker

更新：已支持 Vue3！

• Vue2 版本组件文件：vshare-address-picker.vue
• Vue3 版本组件文件：vshare-address-picker2.vue

基于uniapp的无限级地址选择器，支持单选/多选、异步加载、搜索功能，适用于省市区/自定义多级分类等场景。

功能特性

• 无限级联动选择，层级不限
• 单选/多选模式切换
• 支持异步加载每一级数据
• 支持本地/远程数据源
• 支持搜索功能
• 字段名可自定义
• 事件丰富，易于集成
• 适配uniapp多端

安装与引入

Vue2 用法

// 方式一：页面中直接引入
import VshareAddressPicker from '@/components/vshare-address-picker/vshare-address-picker.vue'

export default {
  components: { VshareAddressPicker }
}

// 方式二：全局注册
import VshareAddressPicker from '@/components/vshare-address-picker'
Vue.use(VshareAddressPicker)

Vue3 用法

// 方式一：页面中直接引入
import VshareAddressPicker2 from '@/components/vshare-address-picker/vshare-address-picker2.vue'

export default {
  components: { VshareAddressPicker2 }
}

基本用法

Vue2

<template>
  <vshare-address-picker
    :data="addressData"
    :multiple="false"
    :searchable="true"
    :asyncLoad="loadChildren"
    :value="selectedPath"
    @change="onChange"
    @confirm="onConfirm"
    @cancel="onCancel"
    @search="onSearch"
  />
</template>

<script>
export default {
  data() {
    return {
      addressData: [], // 第一级数据
      selectedPath: []
    }
  },
  methods: {
    // 异步加载子节点
    loadChildren(parent, level) {
      // 返回Promise<children[]>
      return fetch(`/api/children?parentId=${parent.value}`)
        .then(res => res.json())
    },
    onChange(val) { console.log('change', val) },
    onConfirm(val) { console.log('confirm', val) },
    onCancel() { console.log('cancel') },
    onSearch(keyword) { console.log('search', keyword) }
  }
}
</script>

Vue3

<template>
  <vshare-address-picker2
    :data="addressData"
    :multiple="false"
    :searchable="true"
    :asyncLoad="loadChildren"
    :value="selectedPath"
    @change="onChange"
    @confirm="onConfirm"
    @cancel="onCancel"
    @search="onSearch"
  />
</template>

<script setup>
import { ref } from 'vue'
import VshareAddressPicker2 from '@/components/vshare-address-picker/vshare-address-picker2.vue'

defineProps({})

const addressData = ref([])
const selectedPath = ref([])

function loadChildren(parent, level) {
  // 返回Promise<children[]>
  return fetch(`/api/children?parentId=${parent.value}`)
    .then(res => res.json())
}
function onChange(val) { console.log('change', val) }
function onConfirm(val) { console.log('confirm', val) }
function onCancel() { console.log('cancel') }
function onSearch(keyword) { console.log('search', keyword) }
</script>

Props

事件

方法（通过ref）

• 暂无（可根据需求扩展）

多选说明

• multiple=true 时，最后一级可多选，返回所有选中项的路径数组。

样式自定义

• 可通过scoped样式或覆盖类名自定义外观。

示例

详见 example.vue 文件。

MIT License