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 が設定され、キーボードでのチェックと移動の実行をサポートします。