# WebPicker

- category: Components
- chinese: web 版本 picker
- type: 基本

---

## 何时使用

Web 版本封装。


## API


### Picker.show(options,onSelect,onCancel,onShow,onFail)

- options 参数

| 参数 | 说明 | 类型 | 默认值|
|:-----|:-----|:-----|:-----|
| title | 标题 | string | |
| dataSource | 数据源, 树形结构或数组 | array | |
| selectedKey | Picker的默认值（非受限） | string or array | 无|
| hasToolbar | 是否有顶部栏 | boolean | false|
| hasToolbarButton | 是否有顶部按钮（确定、取消） | boolean | false|
| hasBottomButton | 是否有底部确认按钮| boolean | false|
| buttonStyle | 底部按钮样式 | object | 无|
| maskClosable | 点击浮层能否关闭| boolean | true|
| locale | 按钮文案| object | {cancel: 'Cancel',confirm: 'Confirm'}|


- onSelect：Picker 点击确认触发的事件
- **onCancel**：Picker 取消触发的事件
- onShow：Picker 成功渲染触发的事件
- onFail ：Picker 渲染失败触发的事件



- dataSource 结构

````js
//一维
[
    {key:'1',value:'第一排'},
    {key:'2',value:'第二排'},
    {key:'3',value:'第三排'},
    {key:'4',value:'第四排'}
    ]

//级联
[
    {
        value: '浙江',
        key: '1111',
        children: [{
            value: '杭州',
            key: '310000'
        },{
            value: '宁波',
            key: '315000'
        }]
    }, {
        value: '江苏',
        key: '11222',
        children: [{
            value: '南京',
            key: '210000'
        },{
            value: '无锡',
            key: '214000'
        },{
            value: '镇江',
            key: '212000'
        }]
    }
]
````

- selectedKey

````js
//一维
selectedKey:'2'
//级联
selectedKey:['11222','210000']
````


````js
Picker.show({
  title:'请选择',
  dataSource:dataSource,
  hasToolbar:true,
  hasToolbarButton:true,
  selectedKey:'2'
},(e)=>{
    console.log('select item ',e)
    //选择某一项
    // [{key:'2',value:'第二排'}]
    // 级联的情况
    // [{key:'11222',value:'江苏'},{key:'210000',value: '南京'}]
    
},(e)=>{
    console.log('cancel',e)
},()=>{
    console.log('success rendered')
},()=>{
    console.log('fail to render picker')
});
````


### Picker.hide()
- 手动关闭picker的方法，不用传任何参数。

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />