function makeSelectionArea( target: MaybeElementRef, options?: SelectionAreaOptions,): SelectionAreaReturn;요소를 그 안의 draggable을 위한 사각형 선택 영역으로 만듭니다. 사각형은 직접 렌더링하세요: <div v-if="isSelecting" class="band" :style="style" />.
<script setup lang="ts">
const area = useTemplateRef<HTMLElement>('area');
const { isSelecting, style } = makeSelectionArea(area);
</script>
<template>
<div ref="area" class="area">
<!-- items -->
<div v-if="isSelecting" class="band" :style="style" />
</div>
</template>
영역의 빈 공간을 누르면 사각형이 시작됩니다. 멀티 드래그와 선택을 참고하세요.
Live
데모 불러오는 중…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import ShapeBoard from './ShapeBoard.vue';
</script>
<template>
<DnDProvider>
<ShapeBoard />
</DnDProvider>
</template>옵션
makeSelectionArea의 옵션. 사각형은 프로바이더의 선택, 즉 멀티 드래그와 selected가 읽는 선택에 항목을 넣습니다(useDnD().selection). modifier, strategy, accept, disabled는 값, ref, getter를 받으며(accept: 값 또는 ref, 함수는 규칙입니다) 누르기가 사각형을 시작할 때 읽습니다. disabled를 켜면 진행 중인 사각형도 취소합니다.
SelectionModifier값 · ref · getter누르기로 사각형을 그리려면 누르고 있어야 하는 키. 기본값: 없음, 빈 공간에서의 어떤 누르기든 사각형을 그립니다.
SelectionStrategy값 · ref · getter기본값 'toggle'.
AcceptRule값 · ref사각형이 선택할 draggable. 드롭 대상과 같은 비교 방식을 씁니다.
boolean값 · ref · gettertrue: 눌러도 사각형을 그리지 않습니다.
(ids: Key[]) => void사각형이 끝났습니다. 지금 선택된 모든 id를 받습니다.
반환값
makeSelectionArea가 반환하는 것.
ComputedRef<boolean>사각형을 그리는 중입니다. 이때 사각형을 렌더링하세요.
ComputedRef<Record<string, string>>선택 사각형 요소의 스타일(absolute, 컨테이너 기준).
값
'toggle': 사각형이 지나가는 항목은 사각형을 그리기 전의 상태에서 뒤집힙니다.'select': 사각형 안의 항목만 선택됩니다.
type SelectionStrategy = 'toggle' | 'select'