Перенос

Перенос выбора между двумя списками. 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	Список ключей левого (исходного) списка (управляемый prop value); если не передан, внутренне используется пустое значение — все данные оказываются справа	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; поддерживается выделение с клавиатуры и запуск переноса.