# @data-slot/select 中文文档
规范地址：https://npmcn.com/package/%40data-slot/select/
版本：1\.1\.3
npm 元数据更新时间：2026-11-05T12:25:08.949Z
中文译文更新时间：2026-11-11T13:17:58.094Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40data-slot/select
原文对照：https://npmcn.com/package/%40data-slot/select/?lang=original
项目主页：https://github.com/bejamas/data-slot#readme
源码仓库：https://github.com/bejamas/data-slot
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：50 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-02-04T09:27:09.531Z
- 最新版本发布：2026-11-05T12:25:08.557Z
- 近 30 天下载量：6049（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：147（近 12 个月 147 个）
## 中文简介
用于从下拉列表中选择单一值的无头可访问的选定组件.
## 安装
```sh
npm install @data-slot/select
```
也可以使用：`pnpm add @data-slot/select`、`yarn add @data-slot/select`、`bun add @data-slot/select`
## README
# @ data- slot/ 选择
用于从下拉列表中选择单一值的无头可访问的选定组件.
## 安装
```bash
npm install @data-slot/select
```
## 使用量
### HTML 结构
```html
Fruits
Apple
Banana
Orange
Other
```
### Java 脚本
```javascript
import { create, createSelect } from '@data-slot/select';
// Auto-discover and bind all selects
const controllers = create();
// Or bind a specific element
const root = document.querySelector('[data-slot="select"]');
const controller = createSelect(root, {
defaultValue: 'apple',
onValueChange: (value) => console.log('Selected:', value),
});
// Programmatic control
controller.open();
controller.close();
controller.select('banana');
console.log(controller.value); // 'banana'
// Cleanup
controller.destroy();
```
`createSelect(root)` 每个根具有一能性。 再次为同一元素调用它返回现有的控制器; 如果您需要用不同的选项重新组合, 则首先将其销毁 .
## API 密码
### 初始化
#### `create(scope?)`
寻找和约束未初始化 `[data-slot="select"]` 后裔 `scope` (违约) `document`) (中文(简体) ). 回返 `SelectController[]` 新绑起的根。 初始化范围元素本身,使用 `createSelect`。 。 。 .
```typescript
import { create } from "@data-slot/select";
const controllers = create();
```
#### `createSelect(root, options?)`
创建一个 `SelectController` 用于一个根元素。 JavaScript 选项优先于相应的数据属性. 再次调用此选项为绑定根返回其已存在的控制器; 在重新绑定新选项前将其销毁 .
```typescript
import { createSelect } from "@data-slot/select";
const controller = createSelect(element, {});
```
### 槽数
#### 运行时间槽
- `select` - 根装箱.
- `select-trigger` - 需要打开弹出并锁定位置的按钮.
- `select-value` - 触发器内的可选文本目标;显示选定的标签或占位符.
- `select-content` - 选项需要弹出容器.
- `select-viewport` - 内部可选滚动容器 `select-content`;用于当前项目对齐滚动.
- `select-item` - 个人选择的选项.
- `select-item-text` - 内部可选文本锁定 `select-item`; 倾向于与 Base/shadcn 样式精确的对等项目.
- `select-group` - 与团体有关的项目.
- `select-label` - 组标签(内置a) `select-group`) (中文(简体) ).
- `select-positioner` - 可选作者定位包装(重新使用而不是生成包装).
- `select-portal` - 可选作者的门户包装器,可以包含 `select-positioner`。 。 。 .
#### 只有样式的槽
- `select-separator` - 物品/组之间的视觉分隔器.
来自作者的项目标签解析 `data-label`,则 `select-item-text`,然后是项目的文本内容. `data-label` 是输入属性,而不是生成状态.
#### 由门户网站标记( 可选)
```html
```
#### 本地标签支持
使用标准的 HTML `