Transferencia

Selección mediante transferencia entre dos listas. v-model se vincula a las claves del lado izquierdo (origen): cuando el valor está vacío, todos los datos están en el lado derecho (destino) y la transferencia equivale a añadir o eliminar claves de origen; los elementos disabled no se pueden mover.

Transferencia

<template>
  <div style="max-width: 640px">
    <LhTransfer v-model="sourceKeys" :data="data" />
    <p class="demo-note">v-model contiene las claves del lado izquierdo (origen): {{ sourceKeys.join(', ') || '(vacío)' }}</p>
    <LhTransfer v-model="sourceKeys" :data="data" disabled />
    <p class="demo-note">disabled desactiva todo el componente (ni los botones ni las casillas responden al pulso)</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    sourceKeys: ['ink', 'paper'],
    data: [
      { key: 'ink', label: 'Tinta china' },
      { key: 'paper', label: 'Papel xuan' },
      { key: 'brush', label: 'Pincel de pelo de lobo' },
      { key: 'seal', label: 'Sello', disabled: true },
    ],
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
data	Datos completos	LhTransferItem[]	[]
v-model	Lista de claves del lado izquierdo (origen) (prop controlada value); si no se pasa, el valor interno de respaldo es vacío y todo queda en el lado derecho	Array<string \| number>	—
disabled	Desactivado	boolean	false
sx	Prop abreviada de maquetación	—	—

Events

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

Accesibilidad

Ambas listas usan role="listbox" + opciones con role="option" + aria-selected; los botones de transferencia llevan un aria-label que indica la dirección y la cantidad, el estado desactivado se marca con aria-disabled, y se admite la selección y el desplazamiento mediante teclado.