基础用法

这个示例展示 v-model:layout 的基本数据流。布局数组提供每个栅格项的位置和尺寸，GridLayout 负责拖拽、缩放、静态项和占位符。

试一试： 拖拽或缩放一个带编号的栅格项。栅格项 2 不会移动；松开指针前，占位符会显示待提交的位置。

在线示例

Vue SFC

<script setup lang="ts">
import { ref } from 'vue'

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

import type { Layout } from 'grid-layout-plus'

const layout = ref<Layout>([
  { x: 0, y: 0, w: 3, h: 2, i: 'a' },
  { x: 3, y: 0, w: 3, h: 3, i: 'b' },
  { x: 6, y: 0, w: 3, h: 2, i: 'c' },
])
</script>

<template>
  <GridLayout v-model:layout="layout" :col-num="12" :row-height="30">
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { Layout, ReadonlyLayout } from 'grid-layout-plus'

function createLayout(): Layout {
  return [
    { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
    { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
    { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
    { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
    { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
    { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
    { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
    { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
    { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
    { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
    { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
    { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
    { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
    { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
    { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
    { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
    { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
    { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
    { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
    { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
  ]
}

const layout = ref(createLayout())
const resetReady = ref(false)
let resetLayoutSnapshot: Layout | null = null

function cloneLayout(source: ReadonlyLayout): Layout {
  return source.map(item => ({ ...item }))
}

function captureResetLayout(nextLayout: ReadonlyLayout) {
  if (!resetLayoutSnapshot) {
    resetLayoutSnapshot = cloneLayout(nextLayout)
    resetReady.value = true
  }
}

function resetLayout() {
  layout.value = resetLayoutSnapshot ? cloneLayout(resetLayoutSnapshot) : createLayout()
}
</script>

<template>
  <section class="demo-root demo-shell">
    <div class="demo-toolbar">
      <Tag class="demo-state demo-state--accent" type="primary" simple circle>
        {{ layout.length }} items
      </Tag>
      <Tag class="demo-state" simple circle> 2 static </Tag>
      <Button button-type="button" :disabled="!resetReady" @click="resetLayout">
        Reset layout
      </Button>
    </div>
    <GridLayout
      v-model:layout="layout"
      class="demo-grid"
      :row-height="30"
      @layout-ready="captureResetLayout"
    >
      <template #item="{ item }">
        <span class="demo-item__label">
          {{ `${item.i}${item.static ? ' · Static' : ''}` }}
        </span>
      </template>
    </GridLayout>
  </section>
</template>