# iPicker **Repository Path**: open_source_reference/iPicker ## Basic Information - **Project Name**: iPicker - **Description**: 无任何依赖的轻量级省市区多级联动组件 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://gitee.com/dreamer365/iPicker/blob/master/README.md - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 42 - **Created**: 2021-05-22 - **Last Updated**: 2022-03-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

iPicker

无任何依赖的轻量级省市区多级联动组件

这是一个轻量级的地区选择组件，可以简单快速的对 “省市区” 进行选择
专门针对桌面端的现代高级浏览器，无任何第三方依赖完全使用原生 JavaScript 开发

查看在线示例

## 安装组件 ##### 本地引入 ```html ``` ##### cdn 引入 ```html ``` ##### npm 安装 ```javascript npm i new-ipicker -S const iPicker = require( "new-ipicker" ); ```
## 示例代码 ```html iPicker 示例代码
```
## 使用方法 - [使用内置数据源](#a) - [使用自定义数据源](#b) - [可选主题模式](#c) - [设置默认选中值](#d) - [监听选中项的变化](#e) - [自定义显示层级](#g) - [默认禁用层级](#h) - [默认禁用地区](#i)

使用内置数据源

注意：内置数据源中的所有地区数据均来自公开的网络搜索，因此不保证其准确性和完整性，请开发者酌情使用！
提示：内置数据源中暂无香港特别行政区、澳门特别行政区和台湾省等地区的数据！ ```html
```

使用自定义数据源

```html
```

可选主题模式

```javascript // select 模式 iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, theme: "select" }); // cascader 模式 iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, theme: "cascader" }); // panel 模式 iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, theme: "panel" }); ```

设置默认选中值

```javascript iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, selected: [ "230000", "230100", "230103" ], selectedCallback: () => console.log( "默认值设置成功" ) }); ```

监听选中项的变化

```javascript iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, onSelect: ( code, name, all ) => { // 返回参数均为数组形式 console.log( code ); console.log( name ); console.log( all ); } }); ```

自定义显示层级

```javascript iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, level: 2 }); ```

默认禁用层级

```javascript // 禁用全部层级 iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, disabled: true }); // 禁用指定层级，仅限 select 主题模式下 iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, disabled: [ 2, 3 ] }); ```

默认禁用地区

```javascript // 禁用全部地区 iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, disabledItem: true }); // 禁用指定地区 iPicker.create("#target", { data: { source: $.getJSON( "area.json" ) }, disabledItem: [ "230000", "230100", "230103" ] }); ```

组件方法

iPicker 提供了 10 个方法： ```javascript // 01. 创建组件 const picker = iPicker.create( "#target", { ... } ); // 01. 创建组件（简写） const picker = iPicker( "#target", { ... } ); // 02. 设置选中项 iPicker.set( picker, [ "230000", "230100", "230103" ] ); // 03. 获取选中项（前两种等效） iPicker.get( picker ); iPicker.get( picker, "code" ); iPicker.get( picker, "name" ); iPicker.get( picker, "all" ); // 04. 清空选中项 iPicker.clear( picker ); // 05. 重置（恢复初始状态） iPicker.reset( picker ); // 06. 销毁组件 iPicker.destroy( picker ); // 07. 启用所有层级 iPicker.enabled( picker, true ); // 07. 启用指定层级，范围：1 - 3，仅限 select 主题模式下 iPicker.enabled( picker, [ 2, 3 ] ); iPicker.enabled( picker, 3 ); // 08. 禁用所有层级 iPicker.disabled( picker, true ); // 08. 禁用指定层级，范围：1 - 3，仅限 select 主题模式下 iPicker.disabled( picker, [ 2, 3 ] ); iPicker.disabled( picker, 3 ); // 09. 启用地区 iPicker.enabledItem( picker, true ); // 09. 启用指定地区 iPicker.enabledItem( picker, [ "230000" ] ); // 10. 禁用所有地区 iPicker.disabledItem( picker, true ); // 10. 禁用指定地区 iPicker.disabledItem( picker, [ "230000" ] ); ```

配置参数

参数 说明 类型 默认值
theme 主题模式，可选值：select、cascader、panel String select
data 设置数据源，共有三个属性：
1. props：数据属性映射（仅能用于自定义数据源）
2. source：数据源类型（Promise 类型表示使用本地数据源；Function 类型表示使用自定义数据源）
3. when：数据源加载成功后执行的函数，可对数据进行最后的处理（若设置了此函数，则一定要在函数中返回处理
3. when：过的数据，函数有两个参数：原始数据和数据对应的层级，层级只在自定义数据源时有用） 		Object {
    props: {
        code: "code",
        name: "name"
    },
    source: null,
    when: null
}
level 展示的层级，可选值：1、2、3 Number 3
width 展示框的宽度，可设置为 Number 类型，单位：px，也可设置为百分比 Number / String 200
height 展示框的高度，单位：px Number 34
radius 展示框和下拉列表的圆角值，单位：px Number 2
maxHeight 下拉列表的最大高度，单位：px Number 300
disabled 禁用层级，设置为 true 则禁用所有层级，设置为 Number 或 Array 则禁用指定层级 Boolean / Number / Array []
disabledItem 禁用指定的地区，设置为 true 则禁用所有地区，设置为 Array 则禁用指定地区（传入行政编码） Boolean / Array []
selected 默认值（传入行政编码） Array []
selectedCallback 成功设置了默认值后执行的函数，主要应用于自定义数据源的情况（因为自定义数据源是异步获取数据） Function 空函数
placeholder 展示框的默认提示文字，select 主题下是 Array 类型，cascader 和 panel 主题下是 String 类型 Array / String [ "省", "市", "区" ]
separator cascader 和 panel 主题下，展示结果中的文字分隔符 String /
onlyShowLastLevel cascader 和 panel 主题下，在展示框中只显示选中结果的最后一级数据 Boolean false
clearable 在展示框右侧显示清空按钮（鼠标悬浮在展示框上时显示） Boolean false
strict 严格模式 Boolean false
icon 展示框末端的图标，可选值：triangle、arrow String triangle
onClear 点击清空按钮时执行的函数 Function 空函数
onSelect 选中地区时执行的函数，有三个参数：行政编码、地区名称、编码与名称的集合体 Function 空函数

开源协议

MIT License

浏览器支持

| Chrome | Firefox | Opera | Edge | Safari | IE | | --- | --- | --- | --- | --- | --- | | 60+ | 60+ | 60+ | 17+ | 12+ | 不支持 |