# WebPicker

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

---

## Usage

Web version encapsulation


## API


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

- options params

| Parameter        | Description                                   | Type            | Default                               |
| :--------------- | :-------------------------------------------- | :-------------- | :------------------------------------ |
| title            | title                                         | string          |                                       |
| dataSource       | tree structure, or array                      | array           |                                       |
| selectedKey      | the default value of the Picker(uncontrolled) | string or array | null                                  |
| hasToolbar       | has a top bar, or not                         | boolean         | false                                 |
| hasToolbarButton | has a top button ( confirm, cancel ),  or not | boolean         | false                                 |
| hasBottomButton  | has a bottom button                           | boolean         | false                                 |
| buttonStyle      | style of bottom button                        | object          | 无                                    |
| maskClosable     | click the floating layer to closed, or not    | boolean         | true                                  |
| locale           | button copy                                   | object          | {cancel: 'Cancel',confirm: 'Confirm'} |


- onSelect: Click ok to confirm the triggered event
- **onCancel**: Cancels the triggered event
- onShow: Successfully render the triggered event
- onFail: Render events that failed to trigger



- dataSource structure

````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()
- Manually close the picker method, without any arguments.

### The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

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