Transfer 穿梭框

双栏/上下穿梭框组件，已专门针对移动端手持屏幕优化，默认采用上下垂直排列模式（上层待选列表，下层已选列表），支持单条点击直速穿梭与多选批量转移。

---

代码示例

1. 移动端上下模式 (Vertical Mode - 默认)

<template>
  <mu-transfer
    v-model:value="targetKeys"
    mode="vertical"
    :data="dataList"
    :titles="['待选择列表', '已选择列表']"
    @change="onChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const targetKeys = ref(['2', '5'])

const dataList = ref([
  { label: '张三 (前端工程师)', value: '1' },
  { label: '李四 (架构师)', value: '2' },
  { label: '王五 (UI 设计师)', value: '3' },
  { label: '赵六 (测试负责人)', value: '4' }
])

function onChange(keys) {
  console.log('已选择 Key 集合:', keys)
}
</script>

---

2. 传统左右并排模式 (Horizontal Mode)

适用于大屏、平板或 PC 端页面展示。

<template>
  <mu-transfer
    v-model:value="targetKeys"
    mode="horizontal"
    :data="dataList"
  />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
value / v-model:value	已选择列表中的 key 数组	Array	-	[]
data / dataSource	全量候选数据列表数组	Array	-	[]
mode	布局显示模式	String	vertical (上下模式，移动端推荐) | horizontal (左右模式)	'vertical'
quickClick	单击列表项是否直接一键穿梭移动	Boolean	true | false	true
labelKey	列表项展示文本的字段 key	String	-	'label'
valueKey	列表项唯一标识符字段 key	String	-	'value'
titles	两侧/上下面板标题文案	Array	-	['待选择', '已选择']
checkable	是否显示复选框批量选择框	Boolean	true | false	true

---

事件说明 (Events)

事件名	说明	回调参数
change	穿梭列表发生移动变更时触发	(targetKeys: Array)
update:value	支持 v-model:value 语法双向绑定	(targetKeys: Array)