Address 地址选择

省市区三级联动地址选择器,支持自定义省份数据

省市区三级联动地址选择器

演示

9:41

代码示例

<!-- 隐藏状态 -->
  <re-button theme="primary" @click="showDefault = true">打开地址选择</re-button>
  <re-address class="demo-default" :visible="showDefault" @update:visible="showDefault = $event" />

<!-- 显示状态 -->
  <re-button theme="primary" @click="showVisible = true">显示地址面板</re-button>
  <re-address class="demo-visible" :visible="showVisible" @update:visible="showVisible = $event" />

<!-- 带省份数据 -->
  <re-button theme="primary" @click="showProvinces = true">带省份数据</re-button>
  <re-address class="demo-provinces" :provinces="provinceData" :visible="showProvinces" @update:visible="showProvinces = $event" />

<!-- 预设值 -->
  <re-button theme="primary" @click="showValue = true">预设值选择</re-button>
  <re-address class="demo-value" :provinces="provinceData" :value="presetValue" :visible="showValue" @update:visible="showValue = $event" />

<!-- 空省份数据 -->
  <re-button theme="primary" @click="showEmpty = true">空省份数据</re-button>
  <re-address class="demo-empty" :visible="showEmpty" @update:visible="showEmpty = $event" />

<!-- 多省份数据 -->
  <re-button theme="primary" @click="showMulti = true">多省份数据</re-button>
  <re-address class="demo-multi" :provinces="multiProvinceData" :visible="showMulti" @update:visible="showMulti = $event" />

<!-- 单省份 -->
  <re-button theme="primary" @click="showSingleProvince = true">单省份选择</re-button>
  <re-address class="demo-single-province" :provinces="singleProvinceData" :visible="showSingleProvince" @update:visible="showSingleProvince = $event" />

<!-- 完整配置 -->
  <re-button theme="primary" @click="showFull = true">完整配置</re-button>
  <re-address class="demo-full" :provinces="provinceData" :value="fullValue" :visible="showFull" @update:visible="showFull = $event" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-address />。

API

Address Props

名称类型默认值描述必传
visiblebooleanfalse是否显示N
valueArray<string>选中的地址值 省, 市, 区N
provincesArray<any>省市区数据N
customStylestring""自定义样式N
lazybooleanfalse懒加载模式:选中某一级后若下一级数据为空,则抛出 level-select 事件,N
loadingbooleanfalse下级数据加载中(常配合 lazy 使用,用于列表区展示加载提示)N

Address Events

名称参数描述
confirmvalue: Array<string>确认时触发
cancel-取消时触发
close-关闭时触发
update:visiblevalue: boolean显隐变化时触发
level-selectpath: Array<string>-

Address Slots

名称描述
--