t-picker-select

PickerSelect 下拉选择器

组件介绍

t-picker-select 是选择列表组件，适用于移动端，支持单选和多选，支持搜索过滤功能。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/picker-select/picker-select.uvue，通过 v-model 绑定选中的值。

<template>
  <!-- 单选 -->
  <t-picker-select 
    v-model="selectedValue"
    :list="options"
    labelKey="name"
    valueKey="id"
    :singled="true"
    placeholder="请选择"
    @confirm="onConfirm">
  </t-picker-select>

  <!-- 多选 -->
  <t-picker-select 
    v-model="selectedValues"
    :list="options"
    labelKey="name"
    valueKey="id"
    :singled="false"
    placeholder="请选择（多选）"
    @confirm="onConfirm">
  </t-picker-select>
</template>

<script setup>
const selectedValue = ref([])
const selectedValues = ref([])

const options = ref([
  { id: '1', name: '选项一' },
  { id: '2', name: '选项二' },
  { id: '3', name: '选项三' }
])

function onConfirm(result: any) {
  console.log('选中的值：', result)
}
</script>

Props

属性名	说明	类型	默认值
modelValue	双向绑定的值	string[]	[]
list	数据源	UTSJSONObject[]	[]
labelKey	显示字段名	string	-
valueKey	值字段名	string	-
singled	是否单选	boolean	true
title	标题	string	-
placeholder	占位文字	string	'请选择'
embeddable	是否嵌入页面	boolean	false
contentClass	内容区样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'mini'

Events

事件名	说明	回调参数
confirm	点击确认按钮时触发	value: string[]
change	值变化时触发	value: string[]
cancel	点击取消按钮时触发	-

Slots

插槽名	说明
default	默认插槽，自定义触发按钮