Vue 3 Grid

comins-grid-layout@0.3.0Vue 3

Vue 3.5 이상에서 /vue의 DashboardGrid와 useDashboardGrid를 사용합니다. widgets·columns·refreshVersion은 Ref이며 템플릿에서 자동으로 해제됩니다. layout-commit을 commands.applyLayoutSnapshot에 연결하여 드래그 결과를 상태에 반영합니다. 기본 슬롯은 위젯 콘텐츠, actions 슬롯은 사용자 버튼을 렌더링합니다.

실행 예제

8×3 변경 후 복원을 누르면 최초 크기 4×2로 돌아옵니다. 크기는 현재 열 수와 위젯 제약을 적용합니다.

미리보기

코드

GridVueDemo.vue

<script setup lang="ts">
import { DashboardGrid, useDashboardGrid } from 'comins-grid-layout/vue';
import 'gridstack/dist/gridstack.min.css';
import 'comins-grid-layout/styles.css';
const props = withDefaults(defineProps<{ lang?: string }>(), { lang: 'ko' });
const { widgets, columns, commands, refreshVersion } = useDashboardGrid({
  initialColumns: 12,
  initialWidgets: [{ id: 'first', title: 'A', layout: { id: 'first', x: 0, y: 0, w: 4, h: 2 } }],
});
</script>
<template>
  <div class="demo" data-demo="grid-vue">
    <div class="demo-toolbar">
      <button @click="commands.resizeWidget('first', { w: 8, h: 3 })">{{ props.lang === 'ko' ? '8×3으로 변경' : 'Resize to 8×3' }}</button>
      <button @click="commands.restoreWidget('first')">{{ props.lang === 'ko' ? '크기 복원' : 'Restore size' }}</button>
      <button @click="commands.resetLayout()">{{ props.lang === 'ko' ? '초기화' : 'Reset' }}</button>
    </div>
    <DashboardGrid :widgets="widgets" :columns="columns" :refresh-key="refreshVersion"
      :engine-options="{ cellHeight: 50, margin: 6, animate: false }" :show-controls="false"
      editable movable resizable @layout-commit="commands.applyLayoutSnapshot">
      <template #default="{ widget }"><div class="widget-content">{{ widget.title }}</div></template>
    </DashboardGrid>
    <pre data-grid-state>{{ JSON.stringify(commands.serializeLayout(), null, 2) }}</pre>
  </div>
</template>

지원 범위

브라우저 CSR을 지원합니다. Nuxt/SSR, Vanilla·Svelte 렌더러, React/Vue 간 혼합 전송은 지원하지 않습니다. KeepAlive 비활성화와 unmount 시 엔진·observer·drag-in을 정리합니다. 전체 설치·CSS·슬롯·emit 계약은 Core와 Vue 3를 참고하십시오.