基于 React 的可配置化中国城市列表选择组件
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
lib
src
.gitignore
.npmignore
LICENSE
README.md
index.html
package.json
webpack.config.js
yarn.lock

README.md

react-city-select

License License

基于 React 的中国城市选择组件,通过城市首字母[A-Z]检索,支持自定义配置

示例: https://chelun.com/url/dswFFKaQ

安装

npm i react-city-select 或 yarn add react-city-select

使用

...
// 引入 CitySelect 组件
import CitySelect from 'react-city-select';

// 引入数据
import data from './data.json';

// 引入图标路径
import iconSrc from './location_icon@2x.png';

export default class APP extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 结构化城市列表数据
      citysData: data.indexCitys, 
      // 对某项数据定制化配置
      config: {
        pos: {
          icon: iconSrc, // 游标图标
          title: '定位城市',
        },
        hot: {
          title: '热门城市',
          key: '热门',
          style: 'grid', // 展示形式( line || grid)
        }
      }
    };
  }

  // 选中城市回调
  handleSelectCity(cityData) {
    console.log('选中数据项:', cityData);
  }

  render() {
    return (
      <CitySelect
        // 传入数据
        data={this.state.citysData}
        // 传入配置
        config={this.state.config}
        // 传入回调
        onSelectItem={this.handleSelectCity.bind(this)}>
      </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

开源许可

License

作者:车轮互联前端团队 - BrightChen

邮箱:chenanyang@chelun.com