下拉框 Select

Select 组件是一个基于 react-select 的下拉选择框，支持单选多选，提供了丰富的自定义功能，包括自定义图标、滚动按钮等。可以灵活用于表单选择、过滤等场景。

---

📦 引入方式

import { Select } from '@npmqg/react-ui-select';

---

🧩 使用示例

📚 基本使用

示例

源码

<Select
  options={[
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ]}
  placeholder="Select an option"
  menuPortalTarget={document.body}
  menuPosition="absolute"
/>

<Select
  isMulti
  isSearchable
  isClearable
  options={[
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
    { label: 'Option 4', value: 'option4' },
  ]}
  placeholder="请选择一个或多个选项"
  menuPortalTarget={document.body}
  menuPosition="absolute"
/>

---

🧩 组件结构

属性名	类型	默认值	描述
options	Array<{label: string, value: string}>	[]	下拉选项列表
value	string | string[]	-	当前选中的值，支持单选/多选
placeholder	string	"请选择"	占位文本
isMulti	boolean	false	是否支持多选
menuPortalTarget	HTMLElement	-	渲染下拉菜单的目标 DOM 节点
menuPosition	absolute | fixed	absolute	菜单定位方式
onChange	(value) => void	-	值变更时的回调函数
className	string	-	自定义样式类名
components	object	-	自定义内部组件（如图标、按钮等）
backgroundColor	string	-	下拉框动态背景色
hoverBgColor	string	-	下拉框悬浮时背景色
borderColor	string	-	下拉框边框颜色
color	string	-	下拉框文字颜色
react-select 全部属性	-	-	-