vue-dnd-kit

文档/API

makeSelectionArea

选中它所碰到的可拖拽元素的选框——拖动其中一个，整个选中集合就会一起移动。

编辑此页

本页由 AI 翻译，可能存在不准确之处。 阅读英文原文

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

让元素成为框选区域，用于选择其中的可拖拽元素。选框由你自己渲染：<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 的选项。选框把项选入 provider 的选中集合，也就是多项拖拽和 selected 读取的那个（useDnD().selection）。modifier、strategy、accept 和 disabled 接受值、ref 或 getter（accept：值或 ref，函数即规则），并在按下开始画选框时读取；开启 disabled 还会取消正在进行的选框。

modifier?
SelectionModifier值 · ref · getter

按下时必须按住这些键才会画出选框。默认：无，在空白处的任何按下都会画选框。

strategy?
SelectionStrategy值 · ref · getter

默认为 'toggle'。

accept?
AcceptRule值 · ref

选框选中哪些可拖拽元素；与放置目标使用相同的匹配器。

disabled?
boolean值 · ref · getter

true：按下不会画选框。

onSelected?
(ids: Key[]) => void

选框结束：获得现在选中的所有 id。

返回值

makeSelectionArea 的返回值。

isSelecting
ComputedRef<boolean>

正在画选框：此时渲染它。

style
ComputedRef<Record<string, string>>

选框矩形元素的样式（绝对定位，相对于容器）。

取值

  • 'toggle'：选框经过的项会在画选框之前的状态基础上切换；
  • 'select'：只有选框内的项被选中。
type SelectionStrategy = 'toggle' | 'select'

按下时必须按住才能画选框的按键（KeyboardEvent.key 或 .code）：全部按住，或只按住其中一部分（'some'）。

keys
string[]

按键，以 KeyboardEvent.key（'Shift'）或 .code（'KeyA'）表示。不设置：任何按下都会画选框。

method
'every' | 'some'

'every'：必须按住 keys 中的所有键；'some'：按住其中一个即可。