citypanel
- 作者:liuduan
- 邮箱:liuduan.05.05@163.com
- 版本:
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=thisonSelect title='请选择城市' onOk=thisonOk opacity=04 onDismiss=thisonDismiss/>
数据结构要求
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
相关资料
Changelog
0.1.0
- init
0.1.2
- 修改readme
- 修复iphone5显示样式bug
0.1.3
- 更新支持lm-popup@0.1.3版本
0.1.4
- 合并popup上属性到citypanel
0.1.5
- 解决for of语句兼容问题,改为forEach
- 增加popup左右显示文字配置属性、暴露onMaskClick钩子
0.1.7
- 解决华为手机app中无法滚动:卸载了portal组件
- 更新了demo
0.1.8
- 添加了遮罩
0.1.10
- 修复了点击按钮报错bug
0.1.11
- 修复初始不显示选中bug
0.1.12
- 修改为lm-popuo依赖
0.1.13
- 修复了初始选中值不在列表范围中会报错的问题
0.2.0
- 升级至react16版本