更新记录

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

版本发布

平台兼容性

uni-app(4.05)

其他

vshare-address-picker

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

功能特性

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

安装与引入

// 方式一：页面中直接引入
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)

基本用法

<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>

Props

事件

方法（通过ref）

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

多选说明

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

样式自定义

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

示例

详见 example.vue 文件。

MIT License