react-city-select
基于 React 的中国城市选择组件,通过城市首字母[A-Z]检索,支持自定义配置
示例: https://chelun.com/url/dswFFKaQ
安装
npm i react-city-select 或 yarn add react-city-select
使用
...// 引入 CitySelect 组件; // 引入数据; // 引入图标路径; Component { superprops; thisstate = // 结构化城市列表数据 citysData: dataindexCitys // 对某项数据定制化配置 config: pos: icon: iconSrc // 游标图标 title: '定位城市' hot: title: '热门城市' key: '热门' style: 'grid' // 展示形式( line || grid) ; } // 选中城市回调 { console; } { return <CitySelect // 传入数据 data=thisstatecitysData // 传入配置 config=thisstateconfig // 传入回调 onSelectItem=thishandleSelectCity> </CitySelect> }
props 参数
属性 | 值 | 说明 |
---|---|---|
data | 必填;对象; | 城市组件数据JSON对象 |
config | 可选;对象; | 配置或覆盖某个 key 下的值,详情见下表 |
onSelectItem | 必填;函数; | 点击单元格数据回调 |
config 参数
属性 | 值 | 说明 |
---|---|---|
config['sec-key']['title'] | 可选;字符串; | 索引标题 |
config['sec-key']['key'] | 可选;字符串; | 游标标题 |
config['sec-key']['icon'] | 可选;字符串; | 游标图标(替代标题) |
config['sec-key']['style'] | 可选;字符串;(line或grid) | 数据项展示方式 |
sec-key : 对象key
data 数据格式
// 定位数据项"pos": [{ "id": "110100", "name": "北京"}],// 热门数据项"hot": [{ "id": "110100", "name": "北京" }, { "id": "120100", "name": "天津" }, { "id": "130100", "name": "石家庄" }],// 字母数据项"A": [{ "id": "152900", "name": "阿拉善盟" }, { "id": "210300", "name": "鞍山" }],"B": [{ "id": "110100", "name": "北京" }, { "id": "130600", "name": "保定" }]...
布局
样式基于 vw 视口相对布局,等比缩放
开发
git clone git@github.com:w3cay/react-city-select.git
npm install 或 yarn
npm run dev 或 yarn dev
开源许可
作者:车轮互联前端团队 - BrightChen
邮箱:chenanyang@chelun.com