SelectDialog 弹窗选择器

基于 BrConfigProvider 实现全局主题配置，支持搜索、分页、批量选择的企业级弹窗选择器组件，可无缝集成 BrFormItem。适用于需要在有限空间内展示并选择大量数据的复杂表单场景。

组件特性

• 🔍 内置搜索：开箱即用的本地搜索，同时支持远程搜索及防抖处理。
• 📦 分组与禁用：支持选项分组、描述、徽标及禁用状态等丰富的数据结构。
• ✅ 单选与多选：可轻松在单选和多选模式之间切换，支持限制最大选择数量。
• 🎨 主题定制：深度集成 BrConfigProvider，支持自定义颜色与圆角。
• 📝 表单集成：无缝对接 BrFormItem，自动处理校验与错误状态。

基础用法

最基础的用法，点击触发器打开弹窗进行单选。

Example

带数量限制的多选

支持多选模式（设置 mode="multiple"），并可通过 maxSelection 限制最大选择数量。

Example

弹窗定位

你可以通过 BrSelectDialogContent 组件上的 position 属性，将弹窗定位在屏幕的不同位置。

Example

远程搜索

开启 remoteSearch 并监听 @search 事件进行远程数据请求，组件内置了防抖功能。

Example

表单与主题集成

无缝继承 BrFormItem 的校验状态，并通过 BrConfigProvider 定制主题。

Example

API

BrSelectDialog Props

属性名	类型	默认值	说明
modelValue / v-model	string | number | (string | number)[]	-	绑定值
options	SelectDialogOption[]	[]	选项数据
mode	'single' | 'multiple'	'single'	选择模式
size	'sm' | 'md' | 'lg' | 'full'	'md'	弹窗及触发器尺寸
position	'center' | 'top' | 'bottom' | 'left' | 'right'	'center'	弹窗定位
title	string	-	弹窗标题
description	string	-	弹窗描述
searchable	boolean	true	是否显示搜索框
remoteSearch	boolean	false	是否为远程搜索
searchDebounce	number	300	搜索防抖延迟（毫秒）
maxSelection	number	-	多选模式下的最大选择数量
loading	boolean	false	是否处于加载状态
disabled	boolean	false	是否禁用

BrSelectDialog Emits

事件名	回调参数	说明
update:modelValue	(value: any) => void	选中值改变时触发
change	(value: any) => void	确认选择时触发
search	(query: string) => void	搜索关键词改变时触发
confirm	(value: any) => void	点击确认按钮时触发
cancel	() => void	点击取消按钮时触发

主题定制规则

通过 BrConfigProvider，您可以轻松覆盖组件内部的 TailwindCSS 变量：

• --primary: 选项选中时的背景与图标颜色
• --border: 弹窗边框及搜索框底边颜色
• --radius: 弹窗与触发按钮的圆角大小
• --destructive: 结合 BrFormItem 触发的表单校验错误边框及聚焦环颜色

您还可以使用标准 Tailwind 类名（如 class="!border-blue-500"）在特定组件上进行局部样式覆盖。