API 索引

使用本页定位 v2 公开符号。组件、组合式函数和组件契约从 grid-layout-plus 导入，组件样式从 grid-layout-plus/style.css 引入；不需要 Vue 组件时，可以从 grid-layout-plus/core 导入不依赖 DOM 的算法。

按任务选择 API

任务	首选 API	继续阅读
渲染可交互的 Vue 栅格	GridLayout 和 GridItem	用法
在栅格项后绘制栅格背景	GridBackground	栅格背景示例
定制指针缩放手柄	resize-handle 插槽	自定义缩放手柄
通过代码修改已渲染的栅格	GridLayoutExpose	操作契约
构建自定义渲染层	useGridLayout	组合式 API 示例
不使用组件管理响应式状态	useResponsiveLayout	响应式类型
观测容器宽度	useContainerWidth	width 属性
校验或规范化 Layout 数据	validateLayout 或 normalizeLayout	Core API
处理被拒绝的操作	OperationRejectedPayload	拒绝原因
迁移 v1 代码	从 v1 迁移	属性

组件与组件契约

公开导出	参考文档
GridLayout	GridLayout 属性、事件和方法
GridItem	GridItem 属性和事件
GridBackground	GridBackground 属性
GridLayoutProps、GridItemProps	属性
GridLayoutEmits、GridItemEmits	事件
GridLayoutExpose、LayoutTransactionReceipt	方法与事务回执
GridItemSlots、GridItemResizeHandleSlotScope、GridLayoutSlots、GridLayoutSlotScope、GridLayoutResizeHandleSlotScope	插槽
GridConfig、DragConfig、ResizeConfig	分组配置
DropConfig、DropCandidate、DropDragOverInput、DropDragOverContext、DropEvaluationResult、DropCreateItemContext、DropCommitResult	Drop 类型与拖放事件
TransferConfig、GridTransferResult	Transfer 类型与 transfer
LayoutUpdateMeta、ResponsiveWidthState、WidthChangedPayload	事件
InteractionStartPayload、InteractionChangePayload	交互事件

布局与扩展类型

公开导出	参考文档
LayoutItemRequired、LayoutItem、ReadonlyLayoutItem、Layout、ReadonlyLayout、ResizeHandleAxis	布局类型
DefaultBreakpoint、Breakpoints	断点类型
ResponsiveValue、ResponsiveLayoutsInput、CompleteResponsiveLayouts	响应式布局类型
Breakpoint、ResponsiveLayout	废弃的兼容别名
CollisionMode	碰撞模式
Compactor、CompactType、CompactMinPositions	压缩器契约
PositionStrategy、PositionStyle	定位策略契约
GridCellDimensions、CalcGridCellDimensionsInput、GridGeometry、PixelRect、ReadonlyClientRect	几何类型
LayoutOperationResult、LayoutOperationResultBase、AcceptedLayoutOperationResult、RejectedLayoutOperationResult、LayoutOperationReason	操作结果
NormalizeLayoutOptions、DeepReadonly	Core API 与 Layout 类型
GridLayoutValidationCode、GridLayoutExtensionCode、GridLayoutExtensionSource	错误

组合式函数与无头契约

公开导出	参考文档
useGridLayout、UseGridLayoutOptions、UseGridLayoutReturn	useGridLayout
useResponsiveLayout、UseResponsiveLayoutOptions、UseResponsiveLayoutReturn	useResponsiveLayout
useContainerWidth、UseContainerWidthOptions、UseContainerWidthReturn	useContainerWidth
GridDragState、GridResizeState、GridInteractionCandidate	useGridLayout 返回状态
GridInteractionStart、GridInteractionStartResult、GridInteractionToken	useGridLayout 交互
InteractionCommandResult、InteractionCancelReason	交互结束契约
InteractionTerminalBase、InteractionTerminalPayload	交互结束契约
LayoutChangeReason、OperationRejectedReason、OperationRejectedPayload	操作契约
GridLayoutRuntimeError	运行时错误

Core 导出值

本节中的值都可以从 grid-layout-plus 和 grid-layout-plus/core 导入。只使用算法时，推荐 /core 入口。

公开导出	参考文档
validateLayout、normalizeLayout、cloneLayout	校验与规范化
bottom、collides、getFirstCollision、getAllCollisions、sortLayoutItemsByRowCol	查询 Layout
correctBounds、compact	边界与旧版底层函数
verticalCompactor、horizontalCompactor、noCompactor	压缩器
fastVerticalCompactor、fastHorizontalCompactor	压缩器
transformStrategy、absoluteStrategy、scaledStrategy	定位策略
calcGridCellDimensions、gridToPixelRect、pointerToGridPosition、pixelSizeToGridSize	几何换算
GridLayoutValidationError、GridLayoutExtensionError	错误
moveElement、withOverlap	已废弃的 API

导入边界

import { GridLayout, useGridLayout } from 'grid-layout-plus'
import { normalizeLayout, validateLayout } from 'grid-layout-plus/core'
import 'grid-layout-plus/style.css'

JavaScript 入口都不会注入组件 CSS。渲染组件时请显式引入 grid-layout-plus/style.css；/core 入口不依赖 Vue、DOM 或组件 CSS。不要从 src、es、lib 或其他内部路径导入本页未列出的 API。