省市区地址选择
适配移动端和pc端
安装
npm i --save lg-area-picker
如何使用
使用举例
template:
<choose-area :value="value" @confirm="getAddress"></choose-area>
script:
import ChooseArea from 'lg-area-picker'
data() {
return {
value: ['350000', '350200', '350203']
};
},
methods: {
getAddress(areaInfo) {
console.log("areaInfo", areaInfo);
}
}
参数
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
value | Array | 当前选中省市区各级对应编码,格式举例:['350000', '350200', '350203'] | 空数组 |
title | String | 顶部栏标题 | 请选择地址 |
confirm-button-text | String | 确认按钮文字 | 确认 |
cancel-button-text | String | 取消按钮文字 | 取消 |
area-list | Array | 省市区地址数据,格式举例:[{ value: '110000', label: '北京市', children: [...] }, ...] | 内含的地址数据文件 |
item-height | Number | 每行选项的高度,单位px,最小18px | 50px |
visible-item-count | Number | 可见的选项个数 | 3 |
show-current-row | Number | 用于显示当前选中数据的行 | 2 |
column-num | Number | 显示列数,3-省市区,2-省市,1-省 | 3 |
回调事件
事件 | 描述 | 回调参数 |
---|---|---|
confirm | 点击右上方完成按钮 | 三级地址对象组成的数组 |
cancel | 点击左上方取消按钮,恢复为最新的value或最后一次confirm对应的值 | - |
change | 选项改变时触发 | 三级地址对象组成的数组,当前列对应的索引(从0开始) |