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 가 설정되며, 키보드로 선택과 이동 트리거를 지원합니다.