lm-citypanel

citypanel

• 作者：liuduan
• 邮箱：[e-mail]
• 版本：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) }	点选城市面板后的回调函数
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. 更新支持lm-popup@0.1.3版本

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版本

---