{"id":17704981,"url":"https://github.com/dwqs/react-area-linkage","last_synced_at":"2025-03-30T15:32:16.720Z","repository":{"id":87782415,"uuid":"100023392","full_name":"dwqs/react-area-linkage","owner":"dwqs","description":"省市区联动选择: https://dwqs.github.io/react-area-linkage/","archived":true,"fork":false,"pushed_at":"2018-04-18T16:22:16.000Z","size":3770,"stargazers_count":61,"open_issues_count":3,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:00:00.952Z","etag":null,"topics":["area","area-linkage","area-picker","china","picker","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwqs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-11T11:06:15.000Z","updated_at":"2025-01-15T09:10:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"a9d559d5-2265-4fa7-9a60-55989cf9e018","html_url":"https://github.com/dwqs/react-area-linkage","commit_stats":{"total_commits":151,"total_committers":2,"mean_commits":75.5,"dds":"0.0066225165562914245","last_synced_commit":"3b34efeabe5d5cf1df591ea87af360e7fc2896e7"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-area-linkage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-area-linkage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-area-linkage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-area-linkage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/react-area-linkage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246339461,"owners_count":20761560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["area","area-linkage","area-picker","china","picker","react"],"created_at":"2024-10-24T22:05:44.306Z","updated_at":"2025-03-30T15:32:13.591Z","avatar_url":"https://github.com/dwqs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![npm-version](https://img.shields.io/npm/v/react-area-linkage.svg) ![license](https://img.shields.io/npm/l/react-area-linkage.svg)\n# react-area-linkage\n省市区联动选择，组合数据来源：[area-data](https://github.com/dwqs/area-data)\n\n## Installation\nInstall the pkg with npm:\n```\n// v3之前的版本\nnpm i --save react-area-linkage\n\n// v3及之后的版本\nnpm i --save react-area-linkage area-data\n```\n\nor yarn\n\n```\n// v3之前的版本\nyarn add react-area-linkage\n\n// v3及之后的版本\nyarn add react-area-linkage area-data\n```\n\n## Usage\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { pca, pcaa } from 'area-data'; // v3 or higher\nimport 'react-area-linkage/dist/index.css'; // v2 or higher\nimport { AreaSelect, AreaCascader } from 'react-area-linkage';\n\n// basic\n\u003cAreaSelect onChange={this.selectedChange} data={pca} /\u003e\n\u003cAreaCascader onChange={this.selectedChange} data={pcaa}/\u003e\n\n//setting\n\u003cAreaSelect type='all' level={2} data={pcaa} onChange={this.selectedChange} /\u003e\n\u003cAreaCascader type='all' onChange={this.selectedChange} level={1} data={pcaa} /\u003e\n```\n\nMore demo to visit [here](https://dwqs.github.io/react-area-linkage/).\n\n## On Demand Import\n\u003e version \u003e= 2.0.0\n\n安装 [babel-plugin-on-demand-import](https://github.com/dwqs/babel-plugin-on-demand-import): \n\n```\nnpm i babel-plugin-on-demand-import -D\n```\n\n修改 `.babelrc`: \n\n```\n{\n    // ...\n    \"plugins\": [\n        [\"on-demand-import\" {\n            \"libraryName\": \"react-area-linkage\",\n            \"libraryPath\": \"dist/lib\"\n        }]\n    ]\n}\n```\n\n```\nimport 'react-area-linkage/dist/index.css'; // v2 or higher\nimport pcaa from 'area-data/pcaa';\n// Only import AreaCascader component\nimport { AreaCascader } from 'react-area-linkage';\n\n\u003cAreaCascader onChange={this.selectedChange} level={2} data={pcaa}\u003e\u003c/AreaCascader\u003e\n\n// Only import AreaSelect component\nimport { AreaSelect } from 'react-area-linkage'; \n\n\u003cAreaSelect onChange={this.selectedChange} level={1} data={pcaa}\u003e\u003c/AreaSelect\u003e\n```\n\n## 属性\n### area-select 组件\n|  参数  |  类型  |  可选值  |  默认值  |  说明  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| type | String |  all/code/text | code | 设置返回的数据格式 |\n| placeholders | Array | - | [] | 设置 placeholder text |\n| level | Number | 0/1/2 | 1 | 设置联动层级(0-只选省份/1-省市联动/2-省市区联动) |\n| size | String | small/medium/large | medium | 设置输入框的大小 |\n| defaultArea | Array | - | [] | 设置默认值(值类型数据需统一，要么全是文本，要么全是区域代码) |\n| onChange | Function | - | - | 选择项改变时的回调 |\n| disabled | Boolean | - | false | 是否禁用 |\n| data | Object | - | - | 地区数据(v3需要传入) |\n\n\u003e v2 仅支持省市区联动，即 v2 不再支持 level 的值为 3\n\n### area-cascader 组件\n|  参数  |  类型  |  可选值  |  默认值  |  说明  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| type | String |  all/code/text | code | 设置返回的数据格式 |\n| placeholder | String | - | '' | 设置 placeholder text |\n| level | Number | 0/1 | 0 | 设置联动层级(0-省市联动/1-省市区联动) |\n| size | String | small/medium/large | medium | 设置输入框的大小 |\n| defaultArea | Array | - | [] | 设置默认值(值类型数据需统一，要么全是文本，要么全是区域代码) |\n| onChange | Function | - | - | 选择项改变时的回调 |\n| disabled | Boolean | - | false | 是否禁用 |\n| separator | String | - | '/' | 显示选中文本的分隔符 |\n| data | Object | - | - | 地区数据(v3需要传入) |\n\n## Related Project\n* [vue-area-linkage](https://github.com/dwqs/vue-area-linkage/)\n\n## License\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-area-linkage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Freact-area-linkage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-area-linkage/lists"}