低代码高性能原生UI框架Picker 选择器
组件类型：UxPickerComponentPublicInstance
支持单列、多列、联动选择，主题样式可配置
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | String | - | 标识符，在回调事件中返回 |
| data | UXPickerData[][] | - | 二维数组 |
| value | any[] | - | 值 |
| link | Boolean | false | 是否联动 |
| title | String | - | 标题 |
| titleColor | String | $ux.Conf.titleColor | 标题颜色 |
| size | Number | $ux.Conf.fontSize | 内容大小 |
| color | String | $ux.Conf.fontColor | 内容颜色 |
| darkColor | String | - | 深色 |
| selectColor | String | $ux.Conf.fontColor | 内容选中颜色 |
| selectStyle | String | border | 选择区域遮罩样式 |
| confirm | String | '确定' | 确定文字 |
| confirmColor | String | $ux.Conf.primaryColor | 确定文字颜色 |
| btnSize | Number | $ux.Conf.fontSize | 按钮大小 |
| btnType | String | 'normal' | 按钮类型 |
| radius | Number | $ux.Conf.radius | 圆角 |
| opacity | Number | $ux.Conf.maskAlpha | 遮罩透明度 0-1 |
| touchable | Boolean | false | 允许滑动关闭 |
| maskClose | Boolean | true | 遮罩层关闭 |
| disabled | Boolean | false | 是否禁用 |
btnType
| 值 | 说明 |
|---|---|
| normal | 正常 |
| bigger | 大按钮 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
selectStyle
| 值 | 说明 |
|---|---|
| border | 边框 |
| box | 盒子 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 确定选择事件 | event: UXPickerEvent |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll v-if="isOk">
<ux-card direction="column" icon="flag" title="选择器" :bold="true">
<ux-text text="支持单列、多列、联动选择，主题样式可配置"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="选择器" text="https://www.uxframe.cn/component/form/picker.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="选择方式" :bold="true">
<ux-text text="支持单列、多列、联动选择" :mb="15"></ux-text>
<ux-col>
<ux-picker :data="data1" :value="[1]" @change="change1">
<ux-cell title="单列" right-icon="arrowdown" :label="value1" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker selectStyle="box" :data="data2" :value="[1, 2]" @change="change2">
<ux-cell title="双列" right-icon="arrowdown" :label="value2" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker selectStyle="box" :data="data4" :link="true" btnType="bigger" @change="change3">
<ux-cell title="多级联动" right-icon="arrowdown" :label="value3" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="关闭方式" :bold="true">
<ux-text text="支持不允许点击遮罩层关闭、滑动关闭" :mb="15"></ux-text>
<ux-col>
<ux-picker :data="data2" :mask-close="false" @change="change5">
<ux-cell title="不允许点击遮罩层关闭" right-icon="arrowdown" :label="value5" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker :data="data2" :touchable="true" @change="change6">
<ux-cell title="允许滑动关闭" right-icon="arrowdown" :label="value6" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义" :bold="true">
<ux-text text="支持自定义样式、标题、按钮类型" :mb="15"></ux-text>
<ux-col>
<ux-picker selectStyle="box" btnType="bigger" :data="data2" :size="16" select-color="red" :bold="true" confirm="提交" confirmColor="red"
@change="change7">
<ux-cell title="自定义样式" right-icon="arrowdown" :label="value7" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker :data="data3" title="请问您想好了吗？" title-color="red" @change="change4">
<ux-cell title="设置标题" right-icon="arrowdown" :label="value4" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker :data="data2" btnType="bigger" :mask-close="false" @change="change5">
<ux-cell title="大按钮" right-icon="arrowdown" :label="value5" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="禁用" :bold="true">
<ux-text text="禁用组件" :mb="15"></ux-text>
<ux-col>
<ux-picker :disabled="true">
<ux-cell :disabled="true" title="禁用" right-icon="arrowdown" placeholder="暂无权限" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll v-if="isOk">
<ux-card direction="column" icon="flag" title="选择器" :bold="true">
<ux-text text="支持单列、多列、联动选择，主题样式可配置"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="选择器" text="https://www.uxframe.cn/component/form/picker.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="选择方式" :bold="true">
<ux-text text="支持单列、多列、联动选择" :mb="15"></ux-text>
<ux-col>
<ux-picker :data="data1" :value="[1]" @change="change1">
<ux-cell title="单列" right-icon="arrowdown" :label="value1" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker selectStyle="box" :data="data2" :value="[1, 2]" @change="change2">
<ux-cell title="双列" right-icon="arrowdown" :label="value2" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker selectStyle="box" :data="data4" :link="true" btnType="bigger" @change="change3">
<ux-cell title="多级联动" right-icon="arrowdown" :label="value3" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="关闭方式" :bold="true">
<ux-text text="支持不允许点击遮罩层关闭、滑动关闭" :mb="15"></ux-text>
<ux-col>
<ux-picker :data="data2" :mask-close="false" @change="change5">
<ux-cell title="不允许点击遮罩层关闭" right-icon="arrowdown" :label="value5" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker :data="data2" :touchable="true" @change="change6">
<ux-cell title="允许滑动关闭" right-icon="arrowdown" :label="value6" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义" :bold="true">
<ux-text text="支持自定义样式、标题、按钮类型" :mb="15"></ux-text>
<ux-col>
<ux-picker selectStyle="box" btnType="bigger" :data="data2" :size="16" select-color="red" :bold="true" confirm="提交" confirmColor="red"
@change="change7">
<ux-cell title="自定义样式" right-icon="arrowdown" :label="value7" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker :data="data3" title="请问您想好了吗？" title-color="red" @change="change4">
<ux-cell title="设置标题" right-icon="arrowdown" :label="value4" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
<ux-picker :data="data2" btnType="bigger" :mask-close="false" @change="change5">
<ux-cell title="大按钮" right-icon="arrowdown" :label="value5" placeholder="请选择" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="禁用" :bold="true">
<ux-text text="禁用组件" :mb="15"></ux-text>
<ux-col>
<ux-picker :disabled="true">
<ux-cell :disabled="true" title="禁用" right-icon="arrowdown" placeholder="暂无权限" placeholder-color="#999"></ux-cell>
</ux-picker>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
import { UXPickerData, UXPickerEvent } from '@/uni_modules/ux-frame/libs/types/types.uts'
let title = ''
const isOk = ref(false)
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
const value7 = ref('')
const data1 = [
[{
name: '橘子',
value: '橘子'
}, {
name: '香蕉',
value: '香蕉'
}, {
name: '苹果',
value: '苹果'
}, {
name: '梨子',
value: '梨子'
}, {
name: '桃子',
value: '桃子'
}, {
name: '西瓜',
value: '西瓜'
}] as UXPickerData[]
] as UXPickerData[][]
const data2 = [
[{
name: '橘子',
value: '橘子'
}, {
name: '香蕉',
value: '香蕉'
}, {
name: '苹果',
value: '苹果'
}, {
name: '梨子',
value: '梨子'
}, {
name: '桃子',
value: '桃子'
}, {
name: '西瓜',
value: '西瓜'
}] as UXPickerData[],
[{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
] as UXPickerData[][]
const data3 = [
[{
name: '橘子',
value: '橘子'
}, {
name: '香蕉',
value: '香蕉'
}, {
name: '苹果',
value: '苹果'
}, {
name: '梨子',
value: '梨子'
}, {
name: '桃子',
value: '桃子'
}, {
name: '西瓜',
value: '西瓜'
}] as UXPickerData[],
[{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[],
[{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
] as UXPickerData[][]
const data4 = [
[{
name: '橘子',
value: '橘子',
children: [{
name: '1个',
value: '0',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '2个',
value: '1',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '3个',
value: '2',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '4个',
value: '3',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '5个',
value: '4',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '香蕉',
value: '香蕉',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '苹果',
value: '苹果',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '梨子',
value: '梨子',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '桃子',
value: '桃子',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '西瓜',
value: '西瓜',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}] as UXPickerData[]
] as UXPickerData[][]
onLoad((e : OnLoadOptions) => {
title = e['title'] ?? ''
setTimeout(function() {
isOk.value = true
}, 100);
})
function change1(e : UXPickerEvent) {
value1.value = e.label.join('-')
}
function change2(e : UXPickerEvent) {
value2.value = e.label.join('_')
}
function change3(e : UXPickerEvent) {
value3.value = e.label.join(':')
}
function change4(e : UXPickerEvent) {
value4.value = e.label.join(' ')
}
function change5(e : UXPickerEvent) {
value5.value = e.label.join('/')
}
function change6(e : UXPickerEvent) {
value6.value = e.label.join('/')
}
function change7(e : UXPickerEvent) {
value7.value = e.label.join('/')
}
</script><script setup>
import { UXPickerData, UXPickerEvent } from '@/uni_modules/ux-frame/libs/types/types.uts'
let title = ''
const isOk = ref(false)
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
const value7 = ref('')
const data1 = [
[{
name: '橘子',
value: '橘子'
}, {
name: '香蕉',
value: '香蕉'
}, {
name: '苹果',
value: '苹果'
}, {
name: '梨子',
value: '梨子'
}, {
name: '桃子',
value: '桃子'
}, {
name: '西瓜',
value: '西瓜'
}] as UXPickerData[]
] as UXPickerData[][]
const data2 = [
[{
name: '橘子',
value: '橘子'
}, {
name: '香蕉',
value: '香蕉'
}, {
name: '苹果',
value: '苹果'
}, {
name: '梨子',
value: '梨子'
}, {
name: '桃子',
value: '桃子'
}, {
name: '西瓜',
value: '西瓜'
}] as UXPickerData[],
[{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
] as UXPickerData[][]
const data3 = [
[{
name: '橘子',
value: '橘子'
}, {
name: '香蕉',
value: '香蕉'
}, {
name: '苹果',
value: '苹果'
}, {
name: '梨子',
value: '梨子'
}, {
name: '桃子',
value: '桃子'
}, {
name: '西瓜',
value: '西瓜'
}] as UXPickerData[],
[{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[],
[{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
] as UXPickerData[][]
const data4 = [
[{
name: '橘子',
value: '橘子',
children: [{
name: '1个',
value: '0',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '2个',
value: '1',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '3个',
value: '2',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '4个',
value: '3',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '5个',
value: '4',
children: [{
name: '1元',
value: '0'
}, {
name: '2元',
value: '1'
}, {
name: '3元',
value: '2'
}, {
name: '4元',
value: '3'
}, {
name: '5元',
value: '4'
}, {
name: '6元',
value: '5'
}] as UXPickerData[]
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '香蕉',
value: '香蕉',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '苹果',
value: '苹果',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '梨子',
value: '梨子',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '桃子',
value: '桃子',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}, {
name: '西瓜',
value: '西瓜',
children: [{
name: '1个',
value: '0'
}, {
name: '2个',
value: '1'
}, {
name: '3个',
value: '2'
}, {
name: '4个',
value: '3'
}, {
name: '5个',
value: '4'
}, {
name: '6个',
value: '5'
}] as UXPickerData[]
}] as UXPickerData[]
] as UXPickerData[][]
onLoad((e : OnLoadOptions) => {
title = e['title'] ?? ''
setTimeout(function() {
isOk.value = true
}, 100);
})
function change1(e : UXPickerEvent) {
value1.value = e.label.join('-')
}
function change2(e : UXPickerEvent) {
value2.value = e.label.join('_')
}
function change3(e : UXPickerEvent) {
value3.value = e.label.join(':')
}
function change4(e : UXPickerEvent) {
value4.value = e.label.join(' ')
}
function change5(e : UXPickerEvent) {
value5.value = e.label.join('/')
}
function change6(e : UXPickerEvent) {
value6.value = e.label.join('/')
}
function change7(e : UXPickerEvent) {
value7.value = e.label.join('/')
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>