Transfer 穿梭框

雙欄列表 + 勾選移動，資料分區與移動邏輯在 core 層以不可變方式完成。雙欄均為 role="listbox"（APG listbox pattern）。

基礎用法

基礎用法

列表一1 / 3

• 甲

列表二2 / 3

• 乙
• 丙

<script setup>
import { ref } from 'vue'
const source = ref(['a'])
const items = [
  { key: 'a', label: '甲' },
  { key: 'b', label: '乙' },
  { key: 'c', label: '丙', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: '甲' },
        { key: 'b', label: '乙' },
        { key: 'c', label: '丙', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

停用

disabled 停用整個穿梭框。

停用穿梭框

列表一1 / 3

• 甲

列表二2 / 3

• 乙
• 丙

<script setup lang="ts">
import { ref } from 'vue'

const source = ref(['a'])
const items = [
  { key: 'a', label: '甲' },
  { key: 'b', label: '乙' },
  { key: 'c', label: '丙', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: '甲' },
        { key: 'b', label: '乙' },
        { key: 'c', label: '丙', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

API

LhTransfer Props

屬性名	說明	類型	預設值
data	全量資料	[LhTransferItem](#type-LhTransferItem)[]	—
modelValue	左側（來源）鍵列表（受控 v-model）	(string | number)[]	() => []
disabled	停用	boolean	false
sx	sx 快速版面配置屬性	LhSxProps	—

Events

事件名	說明	回呼參數
update:modelValue	右側（目標）鍵列表變化時觸發，配合 v-model 使用	(keys: Array<string | number>)
change	資料移動完成後觸發	(keys: Array<string | number>, direction: 'left-to-right' | 'right-to-left')

LhTransferItem

欄位	說明	類型
key	唯一鍵	string | number
label	顯示文本	string
disabled	停用（不可移動）	boolean

無障礙

• 雙欄均為 role="listbox" + aria-multiselectable，項為 role="option" + aria-selected / aria-disabled
• 移動按鈕為真實 <button> 且帶命名（移到左側 / 移到右側）；全選為原生 checkbox（半選態真實 indeterminate）
• 每側獨立的搜尋框帶 aria-label；停用項全鏈路攔截（勾選、全選、移動）

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/transfer/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhTransferProps

export interface LhTransferProps {
  /** 全量資料 */
  data: LhTransferItem[]
  /** 左側（來源）鍵列表（受控 v-model） */
  modelValue?: Array<string | number>
  /** 停用 */
  disabled?: boolean
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhTransferSide _{（來自 @lh-ui/share/core/transfer）}

/** 面板側別 */
export type LhTransferSide = 'left' | 'right'

LhTransferItem _{（來自 @lh-ui/share/core/transfer）}

/** 穿梭框資料項 */
export interface LhTransferItem {
  /** 唯一鍵 */
  key: string | number
  /** 顯示文本 */
  label: string
  /** 停用（不可移動） */
  disabled?: boolean
}