Nuke-web-picker NPM

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

//一维
[
    {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')
});