fy-mutiple-region-relect

基于antd的地区多选组件

• 可以切换为按照大区选择和按照拼音选择两种模式
• 地区可多选,点击大区则相当于选中大区下所有省
• 支持拼音搜索过滤功能

安装

cnpm install 'fy-mutiple-region-relect'

fy-mutiple-region-relect

fy-mutiple-region-relect 是一个基于 React, Antd 封装的地区选择业务组件；帮助你轻松的解决项目中需要地区多选,选择大区的问题。

最近更新

fy-mutiple-region-relect 升级到3.0 添加拼音搜索过滤功能 支持中文 英文全拼 英文首字母缩写

fy-mutiple-region-relect 升级到2.0 修复bug

fy-mutiple-region-relect 升级到 1.0.8 去掉showDistrict showCity属性 不展示市或区 用disabledDistrict disabledCity

fy-mutiple-region-relect 升级到 1.0.7 增加changeOnSelect

fy-mutiple-region-relect 升级到 1.0.6 更改showClear效果

fy-mutiple-region-relect 升级到 1.0.5，优化样式

fy-mutiple-region-relect 升级到 1.0.3，优化内部代码.

fy-mutiple-region-relect 升级到 1.0.2 支持传入showCity 来是否显示市

fy-mutiple-region-relect 升级到 1.0.1，支持传入showDistrict来是否显示地区.

在线实时演示

http://www.acglouvre.art/#/select

---

如何在项目中接入 fy-mutiple-region-relect;

安装

npm install --save fy-mutiple-region-relect

组件用法

<div id="app"></div>

.container {
  width: 200px;
  margin: 100px 60px;
  .button-group {
    margin-top: 20px; 
  }
}

 
import React, { Component } from 'react'
import MultipleRegionSelect from  'fy-mutiple-region-relect'
import { Button } from 'antd'
import regionData from './region'
import './style.scss'
 
class Select extends Component {
  onMutipleSelect = (ref) => {
    this.mutipleSelect = ref;
  }
 
  getAddress = ()=>{
    console.log(this.mutipleSelect.getAllAddressArr());
  }
 
  clearAddress = ()=>{
    this.mutipleSelect.clearAddressArr();
  }
 
  render(){
    const { regions, allAreaList } = regionData;
    return(
      <div className="container">
        <h2>测试地区多选</h2>
        <MultipleRegionSelect 
          regions={regions}
          allAreaList={allAreaList}
          showClear={true}
          disabledDistrict={true}
          onRef={this.onMutipleSelect}
        />
        <div className="button-group">
          <Button type="primary" onClick={this.getAddress}>获取地区json</Button>
          <Button style={{marginLeft:20}} onClick={this.clearAddress}>重置</Button>
        </div>
      </div>
      
    )
  }
}
 
export default Select
 
ReactDOM.render(
  <Select />,
)

示例图片

参数说明：

参数	说明	类型	默认值
regions	省市区JSON	Array	[]
allAreaList	大区JSON	Array	[]
showArea	是否可以切换大区	Bool	true
disabledDistrict	是否可以选择地区	Bool	false
changeOnSelect	是否可以支持changeOnSelect	Bool	true