文档/API

通用类型

每个 API 页面都会引用的小类型——key、坐标、矩形、元素引用和响应式选项。

编辑此页

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

响应式选项

大多数选项接受值、ref 或 getter,并在需要时读取:变化最迟在下一次拖拽时生效。表格中把它们标记为 值 · ref · getter。

值、getter 或任何 ref(可写、浅层、computed、只读——例如来自 useTemplateRef 的),库只会读取它。与 Vue 的 MaybeRefOrGetter 不同,在需要 string | number 的地方它接受 Ref<string>。

type MaybeReadonlyRefOrGetter = T | Readonly<Ref<T>> | (() => T)

值或任何 ref,用于函数本身就是一种值的选项(浮层组件、accept 规则、自定义动画),因此无法区分 getter。把组件放在 shallowRef(或 computed)中:Vue 不能把它们变成响应式的。

type MaybeReadonlyRef = T | Readonly<Ref<T>>

元素

组合式函数作用的元素(makeDraggable(target)):元素本身、模板引用(useTemplateRef)或 getter。它可以变化(v-if):本库会跟随它。

type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>

元素:HTML 或 SVG 元素,或组件实例(它的根元素 $el),就像模板引用给出的那样。还没有元素(尚未挂载)时为 null 或 undefined。

type MaybeElement = | HTMLElement | SVGElement | ComponentRef | null | undefined

Key 与几何

id 或 key:可拖拽元素、放置目标、列表或列表项的。

type Key = string | number

一个点或一个偏移量,单位 px:从视口左上角算起的位置,或从拖拽开始处算起的偏移量(delta、transform)。

number

水平方向,向右增大。

number

垂直方向,向下增大。

宽度和高度,单位 px。

number

宽度,单位 px。

number

高度,单位 px。

一个盒子,单位 px,使用视口坐标,与 getBoundingClientRect() 给出的一致。

number

上边缘,从视口顶部算起。

number

左边缘,从视口左侧算起。

number

宽度。

number

高度。

number

右边缘,从视口左侧算起:left + width。

number

下边缘,从视口顶部算起:top + height。

状态

provider 当前在做什么:

  • 'idle':什么都没做;
  • 'activating':按下正在等待满足激活约束(一段距离、一次长按);
  • 'dragging':拖拽进行中;
  • 'dropping':放置正在确定中(异步的 onBeforeDrop),或浮层仍在落位;
  • 'selecting':选择区域正在画选框。
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'

拖拽如何移动,无论由哪个传感器驱动(SensorActivation.type):'pointer' 跟随坐标点,'keyboard' 按项移动。

type SensorType = 'pointer' | 'keyboard'

按下的指针类型(PointerEvent.pointerType):激活按类型设置。

type PointerKind = 'mouse' | 'touch' | 'pen'

一个值,或该值的 promise:可能是异步的钩子所返回的(onBeforeDrop)。

type MaybePromise = T | Promise<T>