Transfer 穿梭框
双栏穿梭选择框，拥有经典的 Neo-Brutalism 双像素边框、硬投影和活跃状态的按压反馈。
预览
Preview
基础用法
源列表
0/13备选项 2
备选项 3
备选项 5
备选项 6
备选项 7
备选项 8
备选项 9
备选项 10
备选项 11
备选项 12
备选项 13
备选项 14
备选项 15
目标列表
0/2备选项 1
备选项 4
可搜索过滤
源列表
0/14备选项 1
备选项 3
备选项 4
备选项 5
备选项 6
备选项 7
备选项 8
备选项 9
备选项 10
备选项 11
备选项 12
备选项 13
备选项 14
备选项 15
目标列表
0/1备选项 2
自定义标题和按钮文字
可选择项
0/15备选项 1
备选项 2
备选项 3
备选项 4
备选项 5
备选项 6
备选项 7
备选项 8
备选项 9
备选项 10
备选项 11
备选项 12
备选项 13
备选项 14
备选项 15
已选择项
0/0暂无数据
安装
pnpm dlx brutx-vue@latest add transfer用法
基础用法
vue
<script setup>
import { ref } from 'vue'
import { Transfer } from 'brutx-ui-vue'
const data = ref([
{ key: 1, label: '选项 1' },
{ key: 2, label: '选项 2' },
{ key: 3, label: '选项 3', disabled: true },
{ key: 4, label: '选项 4' }
])
const value = ref([1])
</script>
<template>
<Transfer v-model="value" :data="data" />
</template>搜索过滤
通过设置 filterable 属性为 true 可以开启搜索过滤功能。
vue
<template>
<Transfer v-model="value" :data="data" filterable />
</template>自定义标题与按钮文本
可以通过 titles 和 buttonTexts 分别自定义面板标题和转移按钮的文本内容。
vue
<template>
<Transfer
v-model="value"
:data="data"
:titles="['待选列表', '已选列表']"
:button-texts="['撤销', '加入']"
/>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | undefined | 追加到穿梭框根容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
modelValue | (string | number)[] | undefined | []按实例调用工厂函数 | 右侧目标面板中已选项目的 key 列表，通过 v-model 双向绑定。 |
详情声明类型(string | number)[] | undefined 默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
data | TransferDataItem[] | undefined | []按实例调用工厂函数 | 穿梭框数据源；每项提供 key 和 label，并可用 disabled 禁止移动。 |
详情声明类型TransferDataItem[] | undefined 关联类型 TransferDataItem 类型定义 — TransferDataItemexport interface TransferDataItem {
key: string | number
label: string
disabled?: boolean
}默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
filterable | boolean | undefined | false | 在左右面板显示过滤输入框。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
filterMethod | ((query: string, item: TransferDataItem) => boolean) | undefined | undefined | 自定义查询与项目匹配函数；返回 true 的项目保留在过滤结果中。 |
详情声明类型((query: string, item: TransferDataItem) => boolean) | undefined 关联类型 TransferDataItem 类型定义 — TransferDataItemexport interface TransferDataItem {
key: string | number
label: string
disabled?: boolean
}默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
titles | string[] | undefined | undefined | 按源面板、目标面板顺序指定两侧标题；未提供完整标题时使用本地化默认文案。 |
详情声明类型string[] | undefined 默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
buttonTexts | string[] | undefined | undefined | 按左移、右移顺序设置两个穿梭按钮的文字；未提供时按钮仅显示方向图标。 |
panelWidth | number | undefined | 260 | 设置左右面板各自的宽度，单位为像素。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
panelHeight | number | undefined | 400 | 设置左右面板的高度，单位为像素。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/transfer/Transfer.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [value: (string | number)[]] | 右侧目标列表的 key 集合变化时发出新数组，用于更新 v-model。 |
详情声明类型[value: (string | number)[]] 来源packages/ui/src/components/transfer/Transfer.vue | ||
@change | [value: (string | number)[], direction: "right" | "left", movedKeys: (string | number)[]] | 项目在左右面板之间移动时发出更新后的目标 key 列表、移动方向和本次移动的 key。 |
详情声明类型[value: (string | number)[], direction: "right" | "left", movedKeys: (string | number)[]] 字面量
来源packages/ui/src/components/transfer/Transfer.vue | ||
数据类型
ts
interface TransferDataItem {
key: string | number
label: string
disabled?: boolean
}导出类型
ts
import type { TransferDataItem } from 'brutx-ui-vue'可访问性
- 键盘操作：
- 各面板内的 Checkbox 控件支持
Space/Enter键进行勾选 - 中间转移按钮支持
Tab键聚焦并使用Enter/Space键触发穿梭
- 各面板内的 Checkbox 控件支持
- ARIA 属性：中间的操作按钮使用
aria-label标示操作方向与含义（"Move selected to right" / "Move selected to left"），各个选择列表项使用 Checkbox 进行状态修饰 - 焦点管理：操作按钮在转移后保持焦点，便于用户连续使用键盘进行数据移动