Transfer 穿梭框

雙列表穿梭選擇。v-model 綁定左側（源）鍵——值為空時全部資料在右側（目標），穿梭即增刪源鍵；disabled 的項不可移動。

穿梭框

<template>
  <div style="max-width: 640px">
    <LhTransfer v-model="sourceKeys" :data="data" />
    <p class="demo-note">v-model 為左側（源）鍵：{{ sourceKeys.join('、') || '（空）' }}</p>
    <LhTransfer v-model="sourceKeys" :data="data" disabled />
    <p class="demo-note">disabled 整組停用（按鈕與勾選框均不可點）</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    sourceKeys: ['ink', 'paper'],
    data: [
      { key: 'ink', label: '水墨' },
      { key: 'paper', label: '宣紙' },
      { key: 'brush', label: '狼毫' },
      { key: 'seal', label: '印章', disabled: true },
    ],
  }),
}
</script>

Props

屬性	說明	類型	預設值
data	全量資料	LhTransferItem[]	[]
v-model	左側（源）鍵列表（受控 value prop）；未傳時內部兜底為空即全部在右	Array<string \| number>	—
disabled	停用	boolean	false
sx	sx 快速佈局屬性	—	—

Events

input（v-model）、change (sourceKeys, direction)

無障礙

兩側列表 role="listbox" + 選項 role="option" + aria-selected； 穿梭按鈕 aria-label 標明方向與數量，停用態設 aria-disabled，支援鍵盤勾選與觸發移動。