# @beisen-phoenix/area-selector

> > PC端地区选择基础交互组件

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/area-selector
pnpm add @beisen-phoenix/area-selector
yarn add @beisen-phoenix/area-selector
bun add @beisen-phoenix/area-selector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-04-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 151.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/area-selector
- npm.io page: https://npm.io/package/@beisen-phoenix/area-selector

## Dependencies (14)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
- [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.21.0
- [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54
- [@beisen-phoenix/radio](https://npm.io/package/@beisen-phoenix/radio.md) ^3.3.55
- [@beisen-phoenix/button](https://npm.io/package/@beisen-phoenix/button.md) ^3.3.55
- [@beisen-phoenix/loading](https://npm.io/package/@beisen-phoenix/loading.md) ^3.3.55
- [@beisen-phoenix/message](https://npm.io/package/@beisen-phoenix/message.md) ^3.3.55
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [@beisen-phoenix/checkbox](https://npm.io/package/@beisen-phoenix/checkbox.md) ^3.3.55
- [@beisen-phoenix/breadcrumb](https://npm.io/package/@beisen-phoenix/breadcrumb.md) ^3.3.55
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55
- [@beisen-phoenix/unmodeled-layer](https://npm.io/package/@beisen-phoenix/unmodeled-layer.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41 — 2019-11-21
- 3.3.39 — 2019-11-20
- 3.3.38 — 2019-11-20
- 3.3.37 — 2019-11-19
- 3.3.36 — 2019-11-19
- … 432 more at https://npm.io/package/@beisen-phoenix/area-selector/versions

## README

## 概述

> PC端地区选择基础交互组件

## 使用方式

```
    npm install --save @beisen-phoenix/area-selector
```

## API说明

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| isMulti | 单选/多选 | boolean | false | Yes |
| required | 多选保存时，是否校验选中数据为空 | boolean | true | No |
| defaultData | 默认选中的值 | Array [{id: 地区id, label: 地区显示名称}] | 无 | Yes |
| value | 当前值，设置此值则为受控组件 | Array [{id: 地区id, label: 地区显示名称}] | 无 | Yes |
| getDataUrl | 数据常量请求链接 | String | "//const.italent.cn/resource/Areas-chs-74-100000.js" | No |
| showForeignSource | 显示国外的数据选项 | Boolean | true | No |
| areaData | 自定义数据源地区的值 | Object | 无 | No |
| onSubmit | 确定方法  | Function | 无 | Yes |
| visible | 用于手动控制确认框显隐 | boolean | `false` | No |
| translation | 多语言常量值 | object | translation: {clearText: "清空已选",selectDataText: "已选地区",allProvincesText: "全部省市",countryText: "国家",cancelText: '取消',submitText: '确定',selectDataEmptyText: "请在左侧选择地区"} | Yes |
| limit | 复选的情况下,可以配置最多能选择的数据条数,达到该数据后,不可再选择| number | 40 |
| showLimit | 复选的情况下，是否显示最多数据条数 | boolean | true |
| maxExpandLevel | 最大钻取深度 | number | No，即不设限制 |
| showParentInSelection | 已选区域属性，是否带直属父级，`true 则显示为 上一级名／当前名`，`false 显示为 当前名` | boolean | false |
| showRootInSelection | 已选区域属性，是否带所有父级，`true 则显示为 第一级/第二级/.../上一级/当前名`， false 则会走showParentInSelection配置 | boolean | false |
| isActiveLinkRelation | 是否开启父子联动 | boolean | false |
| selectedLevel | 选定层级：1）如选定层级小于等于钻取层级，则选定层级和之后的层级均显示复选框可进行勾选；之前的层级复选框隐藏不可进行勾选；（2）如选定层级大于钻取层级，则钻取层级的末级显示复选框可进行勾选，末级之前的层级复选框隐藏不可进行勾选；如果末级为一级，则显示复选框 | number | 不设限制 |



## 数据格式注意
- getDataUrl 

  >	getDataUrl是北森提供的标准地区常量数据源地址,返回数据有严格规定。如果你想要使用自定义的数据源,则需要使用areaData属性。
  
  >getDataUrl默认是返回的数据是现在是中文版本，如果是其他语言版本需要自己拼接链接，比如: http://const.italent.cn/resource/Areas-en-74-100000.js.
  
  >数据返回的内容格式如下：
  
	```
	ConstAreas([
	    ["1",["全国"],"",0],
	    ["2",["国外"],"",1],
	    ....
	])
	```


> 数据解释及含义`["1",["全国"],"",0]`
 数组的第一个元素代表地区的id， 
 第二个代表显示的文字，
 第三个代表数据的父级元素、
 第四个元素代表是否含有子地区

  > 地区数据的全国和国外id为1、2，parentId为空，都应该是含有子节点的

- areaData的数据单项格式`["1",["国内"], "" , 0]` 数据含义的解释如上



## 样式属性

```
const propsData = {
    isMuiti: false,
    selectData: [{
        id: "1001",
        label: "顺义区"
    }],
    areaData: [
        ["1",["国内"], "" , ""]
        ...
    ]
}
```

---
_Source: https://npm.io/package/@beisen-phoenix/area-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._