更新记录

1.0.0（2025-07-05）

版本发布

平台兼容性

uni-app(4.05)

其他

vshare-area-stepper-picker 组件文档

组件简介

vshare-area-stepper-picker 是一个支持多级联动、分组、步骤条、主题自定义的高颜值地区选择弹窗组件，适用于省市区/街道等多级地址选择场景。

属性 Props

事件 Events

用法示例 Usage

1. 基本用法

<vshare-area-stepper-picker
  :areaData="areaData"
  @confirm="onConfirm"
  @close="onClose"
/>

2. 回显已选内容

<vshare-area-stepper-picker
  :areaData="areaData"
  :value="['gd','gz','th','sp']"
/>

3. 自定义主题色/圆角/字号

<vshare-area-stepper-picker
  :areaData="areaData"
  themeColor="#007aff"
  radius="16rpx"
  stepFontSize="32rpx"
  itemFontSize="34rpx"
/>

4. 自定义步骤条内容

<vshare-area-stepper-picker
  :areaData="areaData"
  :steps="['大区','省份','城市']"
/>

主题自定义说明

• 通过 themeColor 设置高亮色（如 #007aff 蓝色）。
• 通过 radius 设置弹窗圆角。
• 通过 stepFontSize、itemFontSize 分别设置步骤条和选项字号。

步骤条自定义说明

• 通过 steps 传递字符串数组，决定步骤条的级数和每一级的名称。
• 例如：['大区','省份','城市'] 支持三级联动。

数据结构说明

[
  {
    label: '广东省', value: 'gd', pinyin: 'G', children: [
      {
        label: '广州市', value: 'gz', pinyin: 'G', children: [
          {
            label: '天河区', value: 'th', pinyin: 'T', children: [
              { label: '石牌街道', value: 'sp', pinyin: 'S' },
              { label: '五山街道', value: 'ws', pinyin: 'W' }
            ]
          }
        ]
      }
    ]
  }
]

• label：显示文本
• value：唯一标识
• pinyin：首字母分组用（可选）
• children：下一级数组

常见问题 FAQ

Q: 如何实现回显？ A: 只需传入 value 数组（如 ['gd','gz','th','sp']），组件会自动回显。

Q: 如何自定义主题色？ A: 传递 themeColor 属性即可，如 themeColor="#007aff"。

Q: 如何自定义步骤条内容？ A: 传递 steps 属性，如 :steps="['大区','省份','城市']"。

Q: 支持几级联动？ A: 支持任意级数，steps 和 areaData 保持一致即可。

如有更多问题，欢迎提 issue 或联系开发者。