跳到主要内容

Picker 选择器

选择器包含了单列选择器和多列选择器

示例

import { Header, ScrollView, TopView, Form, Card, Divider, PickerSelect, PickerMultiSelect } from '@/duxui'

const selectorData = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const selectorObjectData = [
{ name: '选项0', value: 0 },
{ name: '选项1', value: 1 },
{ name: '选项2', value: 2 },
{ name: '选项3', value: 3 },
{ name: '选项4', value: 4 },
{ name: '选项5', value: 5 },
{ name: '选项6', value: 6 },
{ name: '选项7', value: 7 }
]

const multiSelectorData = [selectorObjectData, selectorObjectData, selectorObjectData]

export default function PickerExample() {
return <TopView>
<Header title='Picker' />
<Form onSubmit={console.log}>
<ScrollView>
<Card margin verticalPadding={false}>
<Divider.Group>

<Form.Item label='单列选择' field='picker1'>
<PickerSelect placeholder='请选择' range={selectorData} grow title='请选择' />
</Form.Item>

<Form.Item label='多列选择' field='picker2'>
<PickerMultiSelect placeholder='请选择' range={multiSelectorData} grow title='请选择' />
</Form.Item>

<Form.Item label='单列选择对象数据' field='picker3'>
<PickerSelect placeholder='请选择' range={selectorObjectData} grow title='请选择' />
</Form.Item>
</Divider.Group>
</Card>
</ScrollView>
</Form>
</TopView>
}

PickerSelect Props

单列选择器

title

弹出选择器的标题

类型必填默认值
string

value

当前选中的值

类型必填默认值
string

range

选项范围

类型必填默认值
any[]

placeholder

提示文本

类型必填默认值
string请选择

nameKey

选项对象中表示名称的键名

类型必填默认值
stringname

valueKey

选项对象中表示值的键名

类型必填默认值
stringvalue

onChange

值变化回调函数

类型必填默认值
(value: string) => void

modalFormProps

传递给modalForm的属性

类型必填默认值
ModalFormProps

PickerMultiSelect Props

多列选择器

title

弹出选择器的标题

类型必填默认值
string

value

当前选中的值

类型必填默认值
any[]

range

选项范围

类型必填默认值
any[][]

placeholder

提示文本

类型必填默认值
string请选择

nameKey

选项对象中表示名称的键名

类型必填默认值
stringname

valueKey

选项对象中表示值的键名

类型必填默认值
stringvalue

onChange

值变化回调函数

类型必填默认值
(value: any[]) => void

modalFormProps

传递给modalForm的属性

类型必填默认值
ModalFormProps