更新记录

2.4（2020-05-19）

1. 修复初始滑动出现市区两列空白问题

2.3（2020-05-07）

1. 新增绑定默认地区类型可通过地区编码进行设置，优化默认地区定位方法
2. 更改变量命名

2.1（2020-04-14）

1. 避免没有设置默认地区时的错误抛出

平台兼容性

省市区三级联动选择器（pick-regions）

简述

• 支持各省各市各区联动
• 支持提前绑定默认地区，（绑定方式包含传地区编码或地区名称数组）首次打开选择器定位到默认地区
• 支持获取地区包含地理编码
• 地区信息从本地一个json文件获取

组件属性和事件

defaultRegion属性类型说明

可选任意一种类型设置默认地区

使用示例

<template>
    <view>
        <pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
            <h2>点击选择省市区</h2>
        </pick-regions>
        <h3>{{regionName}}</h3>
    </view>
</template>

<script>
    import pickRegions from '@/components/pick-regions/pick-regions.vue'
    export default {
        components:{ pickRegions },
        data(){
            return {
                region:[],
                defaultRegion:['广东省','广州市','番禺区'],
                defaultRegionCode:'440113'
            }
        },
        computed:{
            regionName(){
                // 转为字符串
                return this.region.map(item=>item.name).join(' ')
            }
        },
        methods:{
            // 获取选择的地区
            handleGetRegion(region){
                this.region = region
            }
        }
    }
</script>

示例线上预览

https://jianjroh.gitee.io/uniapp_plug_in_development/#/pages/pick-regions/pick-regions

作者想说

有部分朋友反馈说初始化没用等等问题简单总结下原因

1. 地区数据直接引用其它来源的数据，格式不对应
2. 引用的地区数据格式对应，字段不对应
3. 有些人修改字段的方式是通过逐个修改源码的字段

正确方式是通过一些JS方法处理你引入的地区数据达到两者格式和字段对应再替换插件本身的地区数据

给点建议

• 最后想给点建议的是多点使用控制变量法来找出异常。
• 从成功状态（示例项目）→单独添加你的每个逻辑（从中发现影响因素）→异常状态（你的应用）