citypanel

• 作者：liuduan
• 邮箱：[email protected]
• 版本：0.2.0

介绍

城市列表选择面板组件 - 按拼音首字母排序

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-citypanel --save

• 如果你还没有安装 npm，可通过以下方式进行 安装。
• 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

使用

<Citypanel
    data={citydata}
    selected={selected}
    showState={showState}
    onSelect={this.onSelect}
    title='请选择城市'
    onOk={this.onOk}
    opacity={0.4}
    onDismiss={this.onDismiss}
/>

数据结构要求

{
    A: [
        {
            cityName:xxx, 
            cityCode: xxx
        },
        ...
    ], 
    B: [
        ...
    ], 
    C: [
        ...
    ], 
    ...
}

如果后台返回不是上述数据结构需转换为该结构形式，可借鉴/dome/app.js中的 parseCitylist 方法

配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | className | String | '' | 自定义类名 | | data | Object isRequired | {} | 城市列表数据 | | selected | Object | {} | 当前被确认选中城市至少含有城市编码cityCode和城市名region两个属性 | | showState | Bool isRequired | false | 控制组件显示隐藏 | | onSelect | Function | arg => { console.log(arg) } | 点选城市后的回调函数，参数为点选城市信息对象结构同selected参数 | | onClick | Function | arg => { console.log(arg) } | 点选城市面板后的回调函数 |q | opacity | Number | 0 | 遮罩透明度 | | title | String | 请选择城市 | popup标题 | | okText | String | undefined | popup右侧文本 | | dismissText | String | undefined | popup右侧文本 | | onOk | Function | - | 点击popup右侧按钮回调，参数为选中城市信息 | | onDismiss | Function | - | 点击popup左右按钮回调，参数为组件显示时的城市信息 | | onMaskClick | Function | - | 点击mask回调，参数为组件显示时的城市信息 | | popheaderHeight | Number | 44 | popup组件-header高度 | | noanimate | Bool | false | 禁止组件显示时自动滚动动画 |

注意事项

• 组件注意事项

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.0

1. init

0.1.2

1. 修改readme
2. 修复iphone5显示样式bug

0.1.3

1. 更新支持[email protected]版本

0.1.4

1. 合并popup上属性到citypanel

0.1.5

1. 解决for of语句兼容问题，改为forEach
2. 增加popup左右显示文字配置属性、暴露onMaskClick钩子

0.1.7

1. 解决华为手机app中无法滚动：卸载了portal组件
2. 更新了demo

0.1.8

1. 添加了遮罩

0.1.10

1. 修复了点击按钮报错bug

0.1.11

1. 修复初始不显示选中bug

0.1.12

1. 修改为lm-popuo依赖

0.1.13

1. 修复了初始选中值不在列表范围中会报错的问题

0.2.0

1. 升级至react16版本