You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

75 lines
2.0 KiB

3 years ago
#### 特性说明
1. 行政区用的是2018还是2019年的全国标准行政区划, 也可以定义远端的 json 地址, 格式看使用文档
2. 返回的 detail.value 和官方的 mode=region 比缺少了 post_code, 主要是我的数据库中没有邮编, 剩下的 code/value 格式和官方保持一致
3. 传参支持官方的 value, disabled, 暂不支持 custom-item
4. 事件支持 change / cancel
5. value 的传值支持
- 行政区号数组 [省,市,区]
- 行政区号字符串 "省,市,区" / "区"
- 暂不支持城市名设置value, 有需要可以自己改造, 很简单的代码
#### 使用方式
```javascript
import regionPicker from "@/components/region-picker/region-picker.vue"
```
```javascript
components: {
regionPicker
},
```
```html
<picker mode="region"
```
替换为
```html
<region-picker
```
即可
```html
<region-picker @change="region_change" :value="350104">
<view class="picker">请选择地区</view>
</region-picker>
```
#### Value 传值说明
```html
<!-- 单传区级行政区号 -->
<region-picker @change="region_change" value="350104">
<!-- 传省市区级行政区号(字符串) -->
<region-picker @change="region_change" value="350000,350100,350104">
<!-- 传省市区级行政区号(数组) -->
<region-picker @change="region_change" :value="[350000,350100,350104]">
<!-- 字符串/整形均可, 没具体测试, 如果报错, 就试着改一下类型 -->
```
#### 使用远端 json
```html
<region-picker jsonPath="远端json文件或者其他返回json格式的数据源">
```
返回json数据应符合格式如下
```json
[{
name: '福建省',
code: '350000',
children: [{
name: '福州市',
code: '350100',
children: [{
name: '仓山区',
code: '350104',
// id: xxx,
// post_code: xxx
// 其他自定义的数据键值对: 值
// change 事件的 detail.data 属性会返回所选区域的完整的对象
},
{
//...第二个区域
}]
},
{
//...第二个城市
}]
},
{
//...第二个省份
}]
```