Picker 选择器

提供从一组预设数据中选择一项的能力，支持单列和多列选择。

基础用法

通过 columns 属性配置选项数据。

<template>
  <button @click="show = true">打开选择器</button>
  <text>选中: {{ value }}</text>

  <dr-picker
    v-model:show="show"
    :columns="columns"
    title="选择城市"
    @confirm="onConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const value = ref('')
const columns = ['北京', '上海', '广州', '深圳', '杭州']

const onConfirm = (e) => {
  value.value = e.value[0]?.label
}
</script>

对象数组

columns 支持对象数组格式，通过 label 和 value 区分显示文本和值。

<script setup>
const columns = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
  { label: '橙子', value: 'orange' }
]

const onConfirm = (e) => {
  console.log('label:', e.value[0]?.label)
  console.log('value:', e.value[0]?.value)
}
</script>

多列选择

columns 传入二维数组可以实现多列选择。

<template>
  <dr-picker
    v-model:show="show"
    :columns="columns"
    title="选择时间"
    @confirm="onConfirm"
  />
</template>

<script setup>
const columns = [
  ['上午', '下午'],
  ['1点', '2点', '3点', '4点', '5点', '6点']
]

const onConfirm = (e) => {
  const time = e.value.map(v => v.label).join(' ')
  console.log(time) // 上午 3点
}
</script>

默认选中

通过 default-index 属性设置默认选中项的索引。

<dr-picker
  v-model:show="show"
  :columns="columns"
  :default-index="[2]"
  title="选择城市"
/>

自定义按钮文字

通过 confirm-text 和 cancel-text 自定义按钮文字。

<dr-picker
  v-model:show="show"
  :columns="columns"
  confirm-text="完成"
  cancel-text="返回"
/>

级联选择

通过监听 column-change 事件，实现多列数据的联动。

<template>
  <dr-picker
    v-model:show="show"
    :columns="columns"
    title="选择地区"
    @column-change="onColumnChange"
    @confirm="onConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

// 省市数据
const cityData = {
  '浙江': ['杭州', '宁波', '温州'],
  '江苏': ['南京', '苏州', '无锡'],
  '广东': ['广州', '深圳', '东莞']
}

// 初始列数据
const columns = ref([
  Object.keys(cityData),
  cityData['浙江']
])

// 列变化回调
const onColumnChange = ({ pickerView, value, columnIndex, resolve }) => {
  if (columnIndex === 0) {
    // 第一列变化时，更新第二列数据
    const cities = cityData[value.value] || []
    pickerView.setColumnValues(1, cities)
    pickerView.setColumnIndex(1, 0)
    resolve()
  }
}

const onConfirm = (e) => {
  console.log('选中:', e.value.map(v => v.label).join(' '))
}
</script>

column-change 回调参数

字段	说明	类型
pickerView	操作 picker 的方法集合	object
value	当前变化列的选中值	{ label, value }
columnIndex	变化的列索引	number
resolve	更新列数据后调用的回调函数	function

pickerView 方法

方法名	说明	参数
setColumnValues	设置某列的数据	(columnIndex, values)
getColumnValues	获取某列的数据	(columnIndex)
setColumnIndex	设置某列的选中索引	(columnIndex, valueIndex)
getColumnIndex	获取某列的选中索引	(columnIndex)
getIndexes	获取所有列的选中索引	-
getValues	获取所有列的选中值	-

API

Props

参数	说明	类型	默认值
v-model:show	是否显示选择器	boolean	false
columns	选项数据，支持一维数组（单列）或二维数组（多列）	array	[]
default-index	默认选中项索引	array	[]
title	标题	string	''
show-toolbar	是否显示工具栏	boolean	true
confirm-text	确认按钮文字	string	确定
cancel-text	取消按钮文字	string	取消
mask-closable	点击遮罩是否关闭	boolean	true
z-index	层级	number	5000
safe-area-bottom	是否适配底部安全区	boolean	true

Events

事件名	说明	回调参数
confirm	点击确认按钮时触发	{ index: number[], value: object[] }
cancel	点击取消按钮时触发	-
change	选项变化时触发	{ index: number[], value: object[] }
column-change	某一列选项变化时触发，用于级联选择	{ pickerView, value, columnIndex, resolve }
close	关闭时触发	-

回调参数说明

confirm 和 change 事件的回调参数：

字段	说明	类型
index	选中项的索引数组	number[]
value	选中项的数据数组，包含 label 和 value	object[]

Methods

通过 ref 可以获取组件实例并调用以下方法：

方法名	说明	参数
setIndex	设置选中项索引	indexes: number[]
getValue	获取当前选中值	-
setColumnValues	设置某列的数据	(columnIndex, values)
getColumnValues	获取某列的数据	(columnIndex)
setColumnIndex	设置某列的选中索引	(columnIndex, valueIndex)
getColumnIndex	获取某列的选中索引	(columnIndex)
getIndexes	获取所有列的选中索引	-
getValues	获取所有列的选中值	-