Lm-citypanel NPM

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

使用

样例文档

GitHub set up

使用

<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`	禁止组件显示时自动滚动动画