安装

大多数应用只需引入 GridLayout 和 GridItem。其他组件和工具可以在用到时单独引入。

使用 pnpm（推荐）：

pnpm i grid-layout-plus

使用 yarn：

yarn add grid-layout-plus

Grid Layout Plus 将组件样式作为独立文件发布，应用可以按自己的 PostCSS、Lightning CSS 或浏览器目标继续处理。请在应用入口引入一次样式：

import 'grid-layout-plus/style.css'

JavaScript 产物不会在运行时注入样式。

引入

全局注册：

import { GridLayout, GridItem } from 'grid-layout-plus'

app
  .component('GridLayout', GridLayout)
  .component('GridItem', GridItem)

也可以在组件中直接引入：

<script setup lang="ts">
import { GridLayout, GridItem } from 'grid-layout-plus'
</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'

export default defineComponent({
  components: {
    GridLayout,
    GridItem
  }
})
</script>

浏览器

从 Releases 下载浏览器版本，再通过 script 标签引入：

<link rel="stylesheet" href="dist/style.css" />
<script src="dist/grid-layout-plus.js"></script>

额外引入

除两个核心组件外，其余功能不会自动注册。用到哪些，就引入哪些：

注意： GridBackground 不包含在默认注册中，必须手动引入。

import {
  // 组件
  GridBackground,

  // 压缩器
  verticalCompactor,
  horizontalCompactor,
  noCompactor,

  // 定位策略
  transformStrategy,
  absoluteStrategy,
  scaledStrategy,

  // 组合式 API
  useGridLayout,
  useContainerWidth,
  useResponsiveLayout,
} from 'grid-layout-plus'

下一步

接着阅读用法了解布局数据如何更新，或直接打开基础用法，从可运行的示例开始。