API 索引

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

按任务选择 API

任务	首选 API	继续阅读
渲染可交互的 Vue 栅格	`GridLayout` 和 `GridItem`	用法
在栅格项后绘制栅格背景	`GridBackground`	栅格背景示例
通过代码修改已渲染的栅格	`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`	方法与事务回执
`GridLayoutSlots`、`GridLayoutSlotScope`	插槽
`GridConfig`、`DragConfig`、`ResizeConfig`	分组配置
`DropConfig`、`DropCandidate`、`DropDragOverInput`、`DropDragOverContext`、`DropEvaluationResult`	Drop 类型与拖放事件
`LayoutUpdateMeta`、`ResponsiveWidthState`、`WidthChangedPayload`	事件
`InteractionStartPayload`、`InteractionChangePayload`	交互事件

公开导出	参考文档
`LayoutItemRequired`、`LayoutItem`、`ReadonlyLayoutItem`、`Layout`、`ReadonlyLayout`	布局类型
`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`	运行时错误

本节中的值都可以从 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'

根入口会注入组件 CSS；/core 入口不依赖 Vue、DOM 或组件 CSS。不要从 src、es、lib 或其他内部路径导入本页未列出的 API。