Picker 滚轮选择器

提供多个选项集合供用户选择，支持单列选择、多列选择和级联选择，通常与弹出层组件、表单项组件配合使用。

导入

// 基础滚轮选择器
import Picker from '@/components/form/Picker.vue';
// 级联滚轮选择器
import CascadePicker from '@/components/form/CascadePicker.vue';
// 日期选择器
import DatePicker from '@/components/form/DatePicker.vue';
// 时间选择器
import TimePicker from '@/components/form/TimePicker.vue';
// 日期时间选择器
import DateTimePicker from '@/components/form/DateTimePicker.vue';
// 表单项级联选择器
import CascadePickerField from '@/components/form/CascadePickerField.vue';
// 表单项滚轮选择器
import PickerField from '@/components/form/PickerField.vue';
// 表单项日期选择器
import DatePickerField from '@/components/form/DatePickerField.vue';
// 表单项时间选择器
import TimePickerField from '@/components/form/TimePickerField.vue';
// 表单项日期时间选择器
import DateTimePickerField from '@/components/form/DateTimePickerField.vue';

使用方法

Picker - 基础滚轮选择器

提供基础的单列或多列滚轮选择功能。

基础用法（单列）

vue

<template>
  <Picker 
    v-model:value="value1" 
    :columns="columns1"
  />
</template>

<script setup>
import { ref } from 'vue';
import Picker from '@/components/form/Picker.vue';

const value1 = ref(['Hangzhou']);
const columns1 = [[
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' },
]];
</script>

多列选择

vue

<template>
  <Picker 
    v-model:value="value2" 
    :columns="columns2"
  />
</template>

<script setup>
import { ref } from 'vue';
import Picker from '@/components/form/Picker.vue';

const value2 = ref([]);
const columns2 = [
  // 第一列
  [
    { text: '周一', value: 'Monday' },
    { text: '周二', value: 'Tuesday' },
    { text: '周三', value: 'Wednesday' },
    { text: '周四', value: 'Thursday' },
    { text: '周五', value: 'Friday' },
  ],
  // 第二列
  [
    { text: '上午', value: 'Morning' },
    { text: '下午', value: 'Afternoon' },
    { text: '晚上', value: 'Evening' },
  ],
];
</script>

CascadePicker - 级联选择器

提供层级关联的选择功能，如省市区选择。

vue

<template>
  <CascadePicker
    v-model:value="value4" 
    :columns="columns4"
    :columnsCount="2"
  />
</template>

<script setup>
import { ref } from 'vue';
import CascadePicker from '@/components/form/CascadePicker.vue';

const value4 = ref([]);
const columns4 = [
  {
    text: '浙江',
    value: 'Zhejiang',
    children: [
      {
        text: '杭州',
        value: 'Hangzhou',
        children: [
          { text: '西湖区', value: 'Xihu' },
          { text: '余杭区', value: 'Yuhang' },
        ],
      },
      {
        text: '温州',
        value: 'Wenzhou',
        children: [
          { text: '鹿城区', value: 'Lucheng' },
          { text: '瓯海区', value: 'Ouhai' },
        ],
      },
    ],
  },
  {
    text: '福建',
    value: 'Fujian',
    children: [
      {
        text: '福州',
        value: 'Fuzhou',
        children: [
          { text: '鼓楼区', value: 'Gulou' },
          { text: '台江区', value: 'Taijiang' },
        ],
      },
      {
        text: '厦门',
        value: 'Xiamen',
        children: [
          { text: '思明区', value: 'Siming' },
          { text: '海沧区', value: 'Haicang' },
        ],
      },
    ],
  },
];
</script>

搭配表单项使用

PickerField - 表单项滚轮选择器

vue

<template>
  <Field label="城市" showRightArrow>
    <PickerField v-model="value3" :columns="columns1" placeholder="请选择城市" />
  </Field>
</template>

<script setup>
import { ref } from 'vue';
import Field from '@/components/form/Field.vue';
import PickerField from '@/components/form/PickerField.vue';

const value3 = ref([]);
const columns1 = [[
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' },
]];
</script>

时间日期选择器

vue

<template>
  <Field name="date" label="选择日期" showRightArrow><DatePickerField /></Field>
  <Field name="time" label="选择时间" showRightArrow><TimePickerField /></Field>
  <Field name="datetime" label="选择日期+时间" showRightArrow><DateTimePickerField /></Field>
</template>

<script setup>
import Field from '@/components/form/Field.vue';
import DatePickerField from '@/components/form/DatePickerField.vue';
import TimePickerField from '@/components/form/TimePickerField.vue';
import DateTimePickerField from '@/components/form/DateTimePickerField.vue';
</script>

API 参考

Picker

基础滚轮选择器组件。

Props

名称	说明	类型	必填	默认值
columns	选择器列	`PickerItem[][]`	是	-
value	选中Value	`(number\|string)[]`	是	-
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`
singleValue	是否在columns只有一列情况下value返回一个值	`boolean`	否	`false`

Events

名称	说明	参数
update:value	值改变事件	`(number\|string)[]`
selectTextChange	选择文本改变事件	`string`

类型定义

interface PickerItem {
  text: string;
  value: string|number;
}

PickerField

表单项滚轮选择器组件。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`(number\|string)[]`	否	`[]`
title	标题	`string`	否	`'请选择选项'`
titleProps	标题属性	`ActionSheetTitleProps`	否	`{ cancelText: '取消', confirmText: '确定' }`
showSelectText	是否显示选中的文本	`boolean`	否	`true`
placeholder	占位符	`string`	否	`'请选择选项'`
initalValue	初始值	`(number\|string)[]`	否	-
shouldUpdateValueImmediately	是否立即更新值	`boolean`	否	`false`
textProps	显示的文本属性	`TextProps`	否	-
columns	选择器列	`PickerItem[][]`	是	-
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`
singleValue	是否在columns只有一列情况下value返回一个值	`boolean`	否	`false`

Events

名称	说明	参数
update:modelValue	值改变事件	`(number\|string)[]`
cancel	取消事件	-
confirm	确认事件	-
selectTextChange	选择文本改变事件	`string`
tempValueChange	临时值改变事件	`(number\|string)[]`

DateTimePicker

日期时间选择器组件，支持自定义显示年月日时分秒。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`Date`	否	-
showYears	是否显示年份	`boolean`	否	`true`
showMonths	是否显示月份	`boolean`	否	`true`
showDays	是否显示日期	`boolean`	否	`true`
showHours	是否显示小时	`boolean`	否	`true`
showMinute	是否显示分钟	`boolean`	否	`true`
showSecond	是否显示秒钟	`boolean`	否	`true`
startYear	开始年份	`number`	否	`当前年份-10`
endYear	结束年份	`number`	否	`当前年份+10`
startMonth	开始月份	`number`	否	`1`
endMonth	结束月份	`number`	否	`12`
startDay	开始日期	`number`	否	`1`
endDay	结束日期	`number`	否	`31`
minuteText	分钟单位文本	`string`	否	`'分'`
secondText	秒钟单位文本	`string`	否	`'秒'`
hourText	小时单位文本	`string`	否	`'时'`
yearText	年份单位文本	`string`	否	`'年'`
monthText	月份单位文本	`string`	否	`'月'`
dayText	日期单位文本	`string`	否	`'日'`
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:modelValue	值改变事件	`Date`
selectTextChange	选择文本改变事件	`string`

DateTimePickerField

表单项日期时间选择器组件。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`Date`	否	-
title	标题	`string`	否	`'请选择时间'`
titleProps	标题属性	`ActionSheetTitleProps`	否	`{ cancelText: '取消', confirmText: '确定' }`
showSelectText	是否显示选中的文本	`boolean`	否	`true`
placeholder	占位符	`string`	否	`'请选择时间'`
initalValue	初始值	`Date`	否	-
shouldUpdateValueImmediately	是否立即更新值	`boolean`	否	`false`
textProps	显示的文本属性	`TextProps`	否	-
showYears	是否显示年份	`boolean`	否	`true`
showMonths	是否显示月份	`boolean`	否	`true`
showDays	是否显示日期	`boolean`	否	`true`
showHours	是否显示小时	`boolean`	否	`true`
showMinute	是否显示分钟	`boolean`	否	`true`
showSecond	是否显示秒钟	`boolean`	否	`true`
startYear	开始年份	`number`	否	`当前年份-10`
endYear	结束年份	`number`	否	`当前年份+10`
startMonth	开始月份	`number`	否	`1`
endMonth	结束月份	`number`	否	`12`
startDay	开始日期	`number`	否	`1`
endDay	结束日期	`number`	否	`31`
minuteText	分钟单位文本	`string`	否	`'分'`
secondText	秒钟单位文本	`string`	否	`'秒'`
hourText	小时单位文本	`string`	否	`'时'`
yearText	年份单位文本	`string`	否	`'年'`
monthText	月份单位文本	`string`	否	`'月'`
dayText	日期单位文本	`string`	否	`'日'`
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:modelValue	值改变事件	`Date`
cancel	取消事件	-
confirm	确认事件	-
selectTextChange	选择文本改变事件	`string`
tempValueChange	临时值改变事件	`Date`

CascadePicker

级联滚轮选择器组件，用于层级关联的选择，如省市区选择。

Props

名称	说明	类型	必填	默认值
columns	选择器列，子项在 children 下面	`CascadePickerItem[]`	是	-
columnsCount	选择器列数量，必须与 children 嵌套层数一致	`number`	否	`1`
value	选中Value	`(number\|string)[]`	是	-
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:value	值改变事件	`(number\|string)[]`
selectTextChange	选择文本改变事件	`string`

类型定义

interface CascadePickerItem {
  text: string;
  value: string|number;
  children?: CascadePickerItem[];
}

CascadePickerField

表单项级联滚轮选择器组件。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`(number\|string)[]`	否	`[]`
title	标题	`string`	否	`'请选择选项'`
titleProps	标题属性	`ActionSheetTitleProps`	否	`{ cancelText: '取消', confirmText: '确定' }`
showSelectText	是否显示选中的文本	`boolean`	否	`true`
placeholder	占位符	`string`	否	`'请选择选项'`
initalValue	初始值	`(number\|string)[]`	否	-
shouldUpdateValueImmediately	是否立即更新值	`boolean`	否	`false`
textProps	显示的文本属性	`TextProps`	否	-
columns	选择器列，子项在 children 下面	`CascadePickerItem[]`	是	-
columnsCount	选择器列数量，必须与 children 嵌套层数一致	`number`	否	`1`
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:modelValue	值改变事件	`(number\|string)[]`
cancel	取消事件	-
confirm	确认事件	-
selectTextChange	选择文本改变事件	`string`
tempValueChange	临时值改变事件	`(number\|string)[]`

TimePicker

时间选择器组件，用于选择小时、分钟和秒钟。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`Date`	否	-
showHours	是否显示小时	`boolean`	否	`true`
showMinute	是否显示分钟	`boolean`	否	`true`
showSecond	是否显示秒钟	`boolean`	否	`true`
minuteText	分钟单位文本	`string`	否	`'分'`
secondText	秒钟单位文本	`string`	否	`'秒'`
hourText	小时单位文本	`string`	否	`'时'`
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:modelValue	值改变事件	`Date`
selectTextChange	选择文本改变事件	`string`

TimePickerField

表单项时间选择器组件。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`Date`	否	-
title	标题	`string`	否	`'请选择时间'`
titleProps	标题属性	`ActionSheetTitleProps`	否	`{ cancelText: '取消', confirmText: '确定' }`
showSelectText	是否显示选中的文本	`boolean`	否	`true`
placeholder	占位符	`string`	否	`'请选择时间'`
initalValue	初始值	`Date`	否	-
shouldUpdateValueImmediately	是否立即更新值	`boolean`	否	`false`
textProps	显示的文本属性	`TextProps`	否	-
showHours	是否显示小时	`boolean`	否	`true`
showMinute	是否显示分钟	`boolean`	否	`true`
showSecond	是否显示秒钟	`boolean`	否	`true`
minuteText	分钟单位文本	`string`	否	`'分'`
secondText	秒钟单位文本	`string`	否	`'秒'`
hourText	小时单位文本	`string`	否	`'时'`
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:modelValue	值改变事件	`Date`
cancel	取消事件	-
confirm	确认事件	-
selectTextChange	选择文本改变事件	`string`
tempValueChange	临时值改变事件	`Date`

DatePicker

日期选择器组件，用于选择年、月、日。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`Date`	否	-
showYears	是否显示年份	`boolean`	否	`true`
showMonths	是否显示月份	`boolean`	否	`true`
showDays	是否显示日期	`boolean`	否	`true`
startYear	开始年份	`number`	否	`当前年份-10`
endYear	结束年份	`number`	否	`当前年份+10`
startMonth	开始月份	`number`	否	`1`
endMonth	结束月份	`number`	否	`12`
startDay	开始日期	`number`	否	`1`
endDay	结束日期	`number`	否	`31`
yearText	年份单位文本	`string`	否	`'年'`
monthText	月份单位文本	`string`	否	`'月'`
dayText	日期单位文本	`string`	否	`'日'`
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:modelValue	值改变事件	`Date`
selectTextChange	选择文本改变事件	`string`

DatePickerField

表单项日期选择器组件。

Props

名称	说明	类型	必填	默认值
modelValue	绑定值	`Date`	否	-
title	标题	`string`	否	`'请选择时间'`
titleProps	标题属性	`ActionSheetTitleProps`	否	`{ cancelText: '取消', confirmText: '确定' }`
showSelectText	是否显示选中的文本	`boolean`	否	`true`
placeholder	占位符	`string`	否	`'请选择时间'`
initalValue	初始值	`Date`	否	-
shouldUpdateValueImmediately	是否立即更新值	`boolean`	否	`false`
textProps	显示的文本属性	`TextProps`	否	-
showYears	是否显示年份	`boolean`	否	`true`
showMonths	是否显示月份	`boolean`	否	`true`
showDays	是否显示日期	`boolean`	否	`true`
startYear	开始年份	`number`	否	`当前年份-10`
endYear	结束年份	`number`	否	`当前年份+10`
startMonth	开始月份	`number`	否	`1`
endMonth	结束月份	`number`	否	`12`
startDay	开始日期	`number`	否	`1`
endDay	结束日期	`number`	否	`31`
yearText	年份单位文本	`string`	否	`'年'`
monthText	月份单位文本	`string`	否	`'月'`
dayText	日期单位文本	`string`	否	`'日'`
pickerHeight	picker高度	`string\|number`	否	`300`
pickerWidth	picker宽度	`string\|number`	否	`750`

Events

名称	说明	参数
update:modelValue	值改变事件	`Date`
cancel	取消事件	-
confirm	确认事件	-
selectTextChange	选择文本改变事件	`string`
tempValueChange	临时值改变事件	`Date`

主题变量

无

Picker 滚轮选择器 ​

导入 ​

使用方法 ​

Picker - 基础滚轮选择器 ​

基础用法（单列） ​

多列选择 ​

CascadePicker - 级联选择器 ​

搭配表单项使用 ​

PickerField - 表单项滚轮选择器 ​

时间日期选择器 ​

API 参考 ​

Picker ​

Props ​

Events ​

类型定义 ​

PickerField ​

Props ​

Events ​

DateTimePicker ​

Props ​

Events ​

DateTimePickerField ​

Props ​

Events ​

CascadePicker ​

Props ​

Events ​

类型定义 ​

CascadePickerField ​

Props ​

Events ​

TimePicker ​

Props ​

Events ​

TimePickerField ​

Props ​

Events ​

DatePicker ​

Props ​

Events ​

DatePickerField ​

Props ​

Events ​

主题变量 ​

Picker 滚轮选择器

导入

使用方法

Picker - 基础滚轮选择器

基础用法（单列）

多列选择

CascadePicker - 级联选择器

搭配表单项使用

PickerField - 表单项滚轮选择器

时间日期选择器

API 参考

Picker

Props

Events

类型定义

PickerField

Props

Events

DateTimePicker

Props

Events

DateTimePickerField

Props

Events

CascadePicker

Props

Events

类型定义

CascadePickerField

Props

Events

TimePicker

Props

Events

TimePickerField

Props

Events

DatePicker

Props

Events

DatePickerField

Props

Events

主题变量