Transfert

Sélection en navette entre deux listes. v-model est lié aux clés de gauche (source) : lorsque la valeur est vide, toutes les données se trouvent à droite (cible) ; la navette équivaut à ajouter ou supprimer des clés source ; les éléments disabled ne peuvent pas être déplacés.

Transfert

<template>
  <div style="max-width: 640px">
    <LhTransfer v-model="sourceKeys" :data="data" />
    <p class="demo-note">v-model contient les clés de gauche (source) : {{ sourceKeys.join(', ') || "(vide)" }}</p>
    <LhTransfer v-model="sourceKeys" :data="data" disabled />
    <p class="demo-note">disabled désactive tout le groupe (boutons et cases à cocher inactifs)</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    sourceKeys: ['ink', 'paper'],
    data: [
      { key: 'ink', label: 'Encre de Chine' },
      { key: 'paper', label: 'Papier Xuan' },
      { key: 'brush', label: 'Pinceau de loup' },
      { key: 'seal', label: 'Sceau', disabled: true },
    ],
  }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
data	Données complètes	LhTransferItem[]	[]
v-model	Liste des clés de gauche (source) (prop value contrôlée) ; si elle n'est pas transmise, l'alternative interne est vide, c'est-à-dire que tout se trouve à droite	Array<string \| number>	—
disabled	Désactivé	boolean	false
sx	Propriétés de mise en page rapide	—	—

Events

input (v-model), change (sourceKeys, direction)

Accessibilité

Les deux listes sont role="listbox" + options role="option" + aria-selected ; les boutons de navette portent un aria-label indiquant la direction et la quantité, l'état désactivé reçoit aria-disabled, et la sélection clavier ainsi que le déplacement sont pris en charge.