# AreaPicker 地区选择器
# 使用指南
areaPicker组件是地区选择器,自定义显示模式 省、省-市、省-市-区
TIP
此组件基于h3-cascade-picker组件实现 , 属于Popup家族组件,查看这篇blogPopup家族, 了解更多
# 代码演示
# API
# Prop
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否显示,v-model 绑定值 | Boolean | false |
maskClosable | 点击蒙层是否可触发关闭 | Boolean | false |
mask | 是否显示透明蒙层,防止触摸穿透 | Boolean | true |
maskCls | mask蒙层自定义class | string | 无 |
wrapCls | wrap弹窗内容区域的自定义class | string | 无 |
round | 是否圆角 | boolean | false |
getRenderContainer | 把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector 查找 | Function=> Node / String | document.body |
title | 标题 | string | - |
cancelText | 第一个按钮文本 | string | '取消' |
clearText | 第二个按钮文本 | string | '清空' |
extraText | 第三个按钮文本 | string | - |
confirmText | 第四个按钮文本 | string | '确定' |
value | 选中的数据 | array | [{ "id": "440000", "name": "广东省", "level": "province" }, { "id": "440300", "name": "深圳市", "level": "city" }, { "id": "440305", "name": "南山区", "level": "district" }], id 别名为adcode |
mode | 地址选择模式P-C-T|P-C|P | string | 'P-C-T' |
source | 区域数据,一个返参为Promise (Promise 需要返回 Array 数据)或Array 类型的函数 或 数组 | function|array | () => [] |
# Event
事件名 | 说明 | 参数 |
---|---|---|
toggle | 切换显示时触发,v-model 绑定事件 | value |
show | 显示时回调 | - |
hide | 关闭时回调 | - |
select | 当点击确认按钮或清空按钮时的回调 | [{ "id": "440000", "name": "广东省", "center": "113.280637,23.125178", "level": "province", "adcode": "440000" }, { "id": "440300", "name": "深圳市", "center": "114.085947,22.547", "level": "city", "adcode": "440300" }, { "id": "440305", "name": "南山区", "center": "113.92943,22.531221", "level": "district", "adcode": "440305"}] |
cancel | 当点击取消按钮及蒙层回调 | - |
extra | 点击第三个按钮回调 | - |