nuke-web-picker

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 结构

//一维
[
    {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

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

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、建议联系 @翊晨
• 钉钉交流群