Dokumentation/API

makeSelectionArea

Ein Auswahlrahmen, der die ziehbaren Elemente auswählt, die er berührt – ziehe eines davon, und die ganze Auswahl bewegt sich mit.

Diese Seite bearbeiten

Diese Seite wurde von KI übersetzt und kann Ungenauigkeiten enthalten. Englisches Original lesen

function makeSelectionArea(  target: MaybeElementRef,  options?: SelectionAreaOptions,): SelectionAreaReturn;

Macht ein Element zu einem Auswahlbereich mit Auswahlrahmen für die ziehbaren Elemente darin. Rendere das Rechteck selbst: <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>

Ein Druck auf eine leere Stelle des Bereichs startet den Rahmen. Siehe Multi-Drag und Auswahl.

Live Ziehe einen Rahmen auf der freien Fläche auf, dann ziehe eine ausgewählte Form

Demo wird geladen…

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import ShapeBoard from './ShapeBoard.vue';
</script>

<template>
  <DnDProvider>
    <ShapeBoard />
  </DnDProvider>
</template>

Optionen

Optionen von makeSelectionArea. Der Rahmen wählt in die Auswahl des Providers aus, die Multi-Drag und selected lesen (useDnD().selection). modifier, strategy, accept und disabled nehmen einen Wert, ein Ref oder einen Getter entgegen (accept: einen Wert oder ein Ref, eine Funktion ist eine Regel) und werden gelesen, wenn ein Druck einen Rahmen startet; disabled einzuschalten bricht auch einen laufenden ab.

modifier?

SelectionModifierWert · Ref · Getter

Tasten, die gedrückt sein müssen, damit ein Druck einen Rahmen aufzieht. Standard: keine, jeder Druck auf die leere Fläche zieht einen auf.

strategy?

SelectionStrategyWert · Ref · Getter

Standard 'toggle'.

accept?

AcceptRuleWert · Ref

Welche ziehbaren Elemente der Rahmen auswählt; der Matcher der Drop-Ziele.

disabled?

booleanWert · Ref · Getter

true: Ein Druck zieht keinen Rahmen auf.

onSelected?

(ids: Key[]) => void

Der Rahmen ist beendet: Bekommt jede jetzt ausgewählte ID.

Rückgabe

Was makeSelectionArea zurückgibt.

isSelecting

ComputedRef<boolean>

Ein Rahmen wird gerade aufgezogen: Rendere ihn dann.

style

ComputedRef<Record<string, string>>

Style für das Element des Auswahlrechtecks (absolut, relativ zum Container).

Werte

'toggle': Elemente, die der Rahmen kreuzt, kehren ihren Zustand von vor dem Rahmen um;
'select': Nur die Elemente innerhalb des Rahmens sind ausgewählt.

type SelectionStrategy = 'toggle' | 'select'

Tasten (KeyboardEvent.key oder .code), die gedrückt sein müssen, damit ein Druck einen Rahmen aufzieht: alle oder 'some' davon.

keys

string[]

Die Tasten, als KeyboardEvent.key ('Shift') oder .code ('KeyA'). Keine: Jeder Druck zieht einen Rahmen auf.

method

'every' | 'some'

'every': Alle keys müssen gedrückt sein; 'some': Eine davon genügt.