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
}参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
layerRef | Ref<ContentLassoMarqueeLayer | null> | 是 | 滚动视口 + 内容根节点 |
items | Ref<readonly { id: string }[]> | 是 | 可选条目(用于启用拖拽) |
onSelectionChange | (ids: string[]) => void | 是 | 框选结果回调 |
rowIdAttribute | string | 否 | 行元素 id 属性,默认 data-cw-lasso-row-id |
dragEnterMinPx | number | 否 | 进入框选模式的最小位移,默认 4 |
itemBlockSelector | string | 否 | 命中该选择器内时不启动框选 |
返回值
| 属性 | 类型 | 说明 |
|---|---|---|
marqueeStyle | ComputedRef | 框选矩形 CSS(left/top/width/height) |
marqueeActive | ComputedRef<boolean> | 是否正在框选 |
onSurfacePointerDown | function | 绑定到可框选表面 |
consumeClickBlock | function | 框选结束后抑制行 toggle click |
工作原理
- 委托
useBrowserLassoSelection处理 pointer 序列与lassoBox状态。 watch(lassoBox)在 RAF 中调用collectElementIdsInContentLassoBox,按内容坐标命中行元素。- 命中 id 通过
onSelectionChange写回;框选期间可选给document.body加bodyClass。 - 卸载时取消 RAF、移除 body class 并
dispose底层监听器。