PickerMultiple 选择器

支持单选和多选的列表选择器，适用于标签选择、城市选择等场景。

单选模式

设置 multiple="false" 切换为单选模式，选中后自动确认关闭。

<template>
  <button @click="show = true">打开单选</button>
  <text>已选: {{ value }}</text>

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

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

const show = ref(false)
const selected = ref('')
const value = ref('')
const list = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' }
]

const onConfirm = (e) => {
  value.value = e.item?.label || ''
}
</script>

多选模式

默认为多选模式，支持选择多项。

<template>
  <button @click="show = true">打开多选</button>
  <text>已选: {{ value }}</text>

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

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

const show = ref(false)
const selected = ref([])
const value = ref('')
const list = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' }
]

const onConfirm = (e) => {
  value.value = e.values.join(', ')
}
</script>

带搜索

设置 show-search 开启搜索功能，支持单选和多选模式。

<!-- 多选 + 搜索 -->
<dr-picker-multiple
  v-model:show="show"
  v-model="selected"
  :list="list"
  show-search
  search-placeholder="搜索城市"
/>

<!-- 单选 + 搜索 -->
<dr-picker-multiple
  v-model:show="show"
  v-model="selected"
  :list="list"
  :multiple="false"
  show-search
  search-placeholder="搜索城市"
/>

限制数量

通过 max 属性限制最多可选数量（仅多选模式有效）。

<dr-picker-multiple
  v-model:show="show"
  v-model="selected"
  :list="list"
  :max="3"
  title="最多选择3项"
/>

全选功能

设置 show-select-all 显示全选按钮（仅多选模式有效）。

<dr-picker-multiple
  v-model:show="show"
  v-model="selected"
  :list="list"
  show-select-all
/>

分页加载

设置 pageable 开启分页功能，滚动到底部时触发 load-more 事件。

<template>
  <dr-picker-multiple
    v-model:show="show"
    v-model="selected"
    :list="list"
    pageable
    :loading="loading"
    :finished="finished"
    @load-more="onLoadMore"
  />
</template>

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

const show = ref(false)
const selected = ref([])
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)

const onLoadMore = async () => {
  loading.value = true
  const data = await fetchData(page.value++)
  list.value = [...list.value, ...data]
  loading.value = false
  if (data.length === 0) {
    finished.value = true
  }
}
</script>

API

Props

参数	说明	类型	默认值
v-model:show	是否显示	boolean	false
v-model	选中的值（多选为数组，单选为单个值）	array | string | number	[]
list	选项列表	array	[]
multiple	是否多选模式	boolean	true
title	标题	string	请选择
show-search	是否显示搜索框	boolean	false
search-placeholder	搜索框占位符	string	搜索
show-selected	是否显示已选项（仅多选）	boolean	true
show-select-all	是否显示全选（仅多选）	boolean	false
show-count	是否显示已选数量（仅多选）	boolean	true
max	最大可选数量，0 表示不限制（仅多选）	number	0
min	最小可选数量（仅多选）	number	0
select-and-confirm	单选模式选中后是否立即确认	boolean	true
label-key	显示文本的字段名	string	label
value-key	值的字段名	string	value
list-height	列表高度	string	400rpx
pageable	是否开启分页	boolean	false
loading	是否正在加载	boolean	false
finished	是否加载完成	boolean	false
loading-text	加载中文字	string	加载中...
finished-text	加载完成文字	string	没有更多了
empty-text	空数据文字	string	暂无数据
mask-closable	点击遮罩是否关闭	boolean	true
z-index	层级	number	5000
safe-area-bottom	是否适配底部安全区	boolean	true

Events

事件名	说明	回调参数
confirm	点击确认时触发	多选: { values: any[], items: object[] } 单选: { value: any, item: object }
cancel	点击取消时触发	-
change	选择变化时触发	多选: { values: any[], items: object[] } 单选: { value: any, item: object }
search	搜索时触发	keyword: string
load-more	滚动到底部时触发（需开启 pageable）	-
close	关闭时触发	-

Methods

方法名	说明	参数
getValue	获取选中值（多选返回数组，单选返回单个值）	-
getItems	获取选中项（多选返回数组，单选返回对象）	-
clear	清空选中	-
setSelected	设置选中项	items: object[] | object

注意事项

1. 单选模式下 v-model 绑定单个值，多选模式下绑定数组
2. 单选模式默认选中后立即确认关闭，可通过 select-and-confirm="false" 关闭
3. 搜索框支持单选和多选两种模式
4. 全选、已选项展示、数量限制等功能仅在多选模式下生效