Skip to content

useBrowserContentLassoMarquee

内容坐标空间的框选 composable,基于 useBrowserLassoSelection 做命中测试。

函数签名

typescript
function useBrowserContentLassoMarquee(
  options: UseBrowserContentLassoMarqueeOptions,
): {
  lassoBox: Ref<LassoBoxRect | null>
  marqueeStyle: ComputedRef<Record<string, string> | undefined>
  marqueeActive: ComputedRef<boolean>
  onSurfacePointerDown: (event: LassoPointerLike) => void
  consumeClickBlock: () => boolean
}

参数

参数名类型必填说明
layerRefRef<ContentLassoMarqueeLayer | null>滚动视口 + 内容根节点
itemsRef<readonly { id: string }[]>可选条目(用于启用拖拽)
onSelectionChange(ids: string[]) => void框选结果回调
rowIdAttributestring行元素 id 属性,默认 data-cw-lasso-row-id
dragEnterMinPxnumber进入框选模式的最小位移,默认 4
itemBlockSelectorstring命中该选择器内时不启动框选

返回值

属性类型说明
marqueeStyleComputedRef框选矩形 CSS(left/top/width/height)
marqueeActiveComputedRef<boolean>是否正在框选
onSurfacePointerDownfunction绑定到可框选表面
consumeClickBlockfunction框选结束后抑制行 toggle click

工作原理

  1. 委托 useBrowserLassoSelection 处理 pointer 序列与 lassoBox 状态。
  2. watch(lassoBox) 在 RAF 中调用 collectElementIdsInContentLassoBox,按内容坐标命中行元素。
  3. 命中 id 通过 onSelectionChange 写回;框选期间可选给 document.bodybodyClass
  4. 卸载时取消 RAF、移除 body class 并 dispose 底层监听器。