移动端的地区选择器，适用于选择嵌套类型的数据。
1.x 版本于 2019年7月29号 停止维护，推荐使用 2.x 版本
点击这里跳转到演示页面，请在移动端打开或者使用浏览器移动端调试工具打开。
- yarn 下载：
yarn add hg-citypicker - npm 下载：
npm install --save hg-citypicker
首先引入文件
<link rel="stylesheet" type="text/css" href="./picker.css" />
<script src="./citypicker.js"></script>实例化地区选择器new CityPicker(configuration)
var cityPicker = new CityPicker({
inputId: "city-input", // 触发选择的元素ID
data: city, // 符合格式的数组
success: function(arr) {
// 回调函数
console.log(arr);
}
});如果你使用构建工具，可以这样引入
import "hg-citypicker/picker.css";
import CityPicker from "hg-citypicker";在vue中实例化插件，如果数据是请求来的，实例化写在请求成功后的回调中
var cityPicker = null
...
mounted () {
this.$nextTick(() => {
cityPicker = new CityPicker({
inputId: 'city-input',
data: city,
success: function(arr) {
console.log(arr);
}
});
});
}data选项接受的数据格式如下，其中的键名value和child可以根据实际需要通过配置项valueKey和childKey设置
var city = [{
value: "北京",
child: [{value: "东城区"}, {value: "西城区"}]
}, {
value: "广东",
child: [{
value: "广州",
child: [{value: "越秀区"}, {value: "荔湾区"}]
}
}]由于考虑到各种复杂的情况，返回的结果数据比较全面。如果你只需要选中的数据，只需要获取数组每项的value（该字段可自定义）属性值即可。例如你选择了广东-广州-越秀，成功的回调函数中会接收如下形式的数组
[{
value: "广东",
child: [{
value: "广州",
child: [{value: "越秀区"}, {value: "荔湾区"}]
}
},{
value: "广州",
child: [{value: "越秀区"}, {value: "荔湾区"}
},{
value: "越秀区"
}]configuration是一个配置项的对象，可以接受如下选项：
| key | value | description |
|---|---|---|
| inputId | String | 目标 DOM 元素 ID，必填 |
| data | Array<Object> | 符合格式的数组，必填 |
| initialOption | Array<String> | 规定初始显示的选项，选填 |
| valueKey | String | 需要展示的数据的键名，默认value |
| childKey | String | 子数据的键名，默认child |
| success | Function | 确定后的回调函数，返回一个结果数组，必填 |
| cancel | Function | 点击取消按钮或者背景后的回调函数，选填 |
| beforeShow | Function | 规定选择框呼起前的逻辑，选填 |
| title | String | 选择器标题，默认为空 |
| sureText | String | 确定按钮文本，默认为“确定” |
| cancelText | String | 取消按钮文本，默认为“取消” |
| a | Number | 惯性滚动加速度（正数, 单位 px/(ms * ms)），规定滚动阻力，加速度越小缓冲距离越长，默认0.001 |
| style | Object | 包含样式配置的对象 |
style对象可以接受如下选项（以下配置项若仍无法满足需求，可自行修改并引入picker.css）：
| key | value | description |
|---|---|---|
| liHeight | Number | 每一个选择栏的高度（px），默认 40 |
| btnHeight | Number | 按钮栏的高度（px），默认 44 |
| btnOffset | String | 按钮离边框的距离，默认 20px |
| titleColor | String | 选择器标题的字体颜色 |
| sureColor | String | 选择器确定按钮的字体颜色 |
| cancelColor | String | 选择器取消按钮的字体颜色 |
| btnBgColor | String | 选择器按钮栏的背景颜色 |
| contentColor | String | 选择器选择区域的文字颜色 |
| contentBgColor | String | 选择器选择区域的背景颜色 |
| upShadowColor | String | 选择器顶部朦层颜色 |
| downShadowColor | String | 选择器底部朦层颜色 |
| lineColor | String | 选择器分隔线颜色 |
| function | param | description |
|---|---|---|
| show() | -- |
呼起选择框（受 forbidSelect 限制） |
| hide() | -- |
关闭选择框 |
| setTitle(text) | text: String |
修改标题内容 |
| forbidSelect(status) | status: true/false |
是否禁用选择框，true表示禁用，false表示不禁用，禁用状态下 beforeShow 回调依然会执行 |
| setInitailOption(initialOption) | initialOption: Array<String> | 变更初始显示的选项，若找不到匹配项，提示Uncaught Error: The matching initailOption cannot be found |
- v2.0.0 使用 ES6 进行项目重构，废弃 inputId 和 beforeShow 配置，废弃 forbidSelect 实例方法，采用更灵活的实例方法调用形式来使用选择器。
v1.3.1 show 受 forbidSelect 限制
v1.3.0 支持 inputId 不填，添加实例方法 show 、 hide 和 setTitle
v1.2.4 修改 readme 内容
v1.2.3 删除压缩文件
v1.2.2 添加实例方法 setInitailOption
v1.2.0 添加实例方法 forbidSelect ，添加 initialOption 配置项，修复选择器隐藏时依然触发 cancel 回调的问题
v1.1.0 添加 boforeShow 配置项
v1.0.0 修改项目文件结构
v0.2.10 添加地区选择器简介
v0.2.9 添加 js 和 css 压缩文件
v0.2.7 取消滑动阈值配置
v0.2.4 取消定位配置，采用底部上滑显示
v0.1.16 添加使用说明和 API 配置说明
v0.1.12 创建地区选择器