Использование с Vue.js

Для использования Gridstack.js в проекте на Vue.js требуется подключить саму библиотеку и её стили. Обычно это делается через npm:

npm install gridstack
npm install gridstack-vue

После установки подключение в компоненте Vue выглядит следующим образом:

import { GridStack } from 'gridstack';
import 'gridstack/dist/gridstack.min.css';

Для Vue 3 существует официальная обёртка gridstack-vue, которая позволяет использовать компоненты <GridStack> и <GridStackItem> как нативные Vue-компоненты.

import { GridStack, GridStackItem } from 'gridstack-vue';

Регистрация компонентов в components:

export default {
  components: {
    GridStack,
    GridStackItem
  }
}

Создание сетки и элементов

Gridstack.js использует контейнер сетки и элементы, которые располагаются внутри неё. В Vue это выглядит следующим образом:

<template>
  <GridStack :options="gridOptions">
    <GridStackItem v-for="item in items" :key="item.id" :gs-x="item.x" :gs-y="item.y" :gs-w="item.w" :gs-h="item.h">
      <div class="grid-item-content">
        {{ item.content }}
      </div>
    </GridStackItem>
  </GridStack>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        float: true,
        cellHeight: 80,
        margin: 10,
      },
      items: [
        { id: 1, x: 0, y: 0, w: 2, h: 2, content: 'Элемент 1' },
        { id: 2, x: 2, y: 0, w: 2, h: 2, content: 'Элемент 2' },
      ]
    }
  }
}
</script>

Ключевые моменты:

  • :gs-x, :gs-y — позиция элемента в сетке по координатам.
  • :gs-w, :gs-h — размеры элемента в ячейках сетки.
  • gridOptions позволяет задавать поведение всей сетки: float, cellHeight, margin и др.

Управление событиями сетки

Gridstack.js поддерживает множество событий, которые позволяют реагировать на перемещение, изменение размеров или удаление элементов. В Vue.js их можно подключать через директивы или методы компонента.

<GridStack ref="grid" :options="gridOptions" @change="onChange">
</GridStack>

<script>
export default {
  methods: {
    onChange(event, items) {
      console.log('Состояние сетки изменилось:', items);
    }
  }
}
</script>

Важные события:

  • added — добавление нового элемента.
  • removed — удаление элемента.
  • change — изменение позиции или размеров элемента.

Динамическое добавление и удаление элементов

Gridstack.js позволяет динамически добавлять элементы без перезагрузки страницы. В Vue.js это реализуется через реактивные данные:

<button @click="addItem">Добавить элемент</button>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem() {
      const id = this.items.length + 1;
      this.items.push({ id, x: 0, y: 0, w: 2, h: 2, content: `Элемент ${id}` });
    },
    removeItem(id) {
      this.items = this.items.filter(item => item.id !== id);
    }
  }
}
</script>

Элементы автоматически добавляются в сетку благодаря реактивности Vue.

Настройка и конфигурация сетки

Gridstack.js предоставляет множество опций для тонкой настройки сетки:

  • cellHeight — высота ячейки сетки в пикселях.
  • margin — отступ между элементами.
  • float — разрешает элементам “плавать”, заполняя свободное место.
  • disableResize — отключение возможности изменения размера.
  • disableDrag — отключение перетаскивания элементов.

Пример конфигурации:

gridOptions: {
  cellHeight: 100,
  margin: 8,
  float: true,
  disableResize: false,
  disableDrag: false,
  animate: true
}

Работа с Gridstack API в Vue

Для прямого управления сеткой и элементами можно использовать экземпляр Gridstack через ref:

<GridStack ref="grid" :options="gridOptions">
</GridStack>

<script>
export default {
  mounted() {
    const grid = this.$refs.grid.grid; // доступ к экземпляру GridStack
    grid.addWidget('<div><div class="grid-item-content">Новый элемент</div></div>', { x: 0, y: 0, w: 2, h: 2 });
  }
}
</script>

Основные методы API:

  • addWidget(el, opts) — добавить новый элемент.
  • removeWidget(el) — удалить элемент.
  • makeWidget(el) — сделать существующий элемент сеточным.
  • batchUpdate() / commit() — группировка изменений для оптимизации перерисовки.
  • serialize() — получить текущее состояние сетки в виде массива объектов.

Стилизация и кастомизация элементов

Каждый элемент Gridstack можно стилизовать через CSS. Для Vue рекомендуется оборачивать содержимое в <div class="grid-item-content"> и использовать локальные или глобальные стили:

.grid-item-content {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

Для динамического изменения классов можно использовать :class или :style внутри <GridStackItem>.

Использование адаптивных сеток

Gridstack.js поддерживает адаптивность через настройку minWidth, maxWidth и использование responsiveGrid:

gridOptions: {
  cellHeight: 80,
  margin: 10,
  float: true,
  column: 12,
  disableOneColumnMode: false
}
  • column задаёт количество колонок.
  • disableOneColumnMode отключает переход в режим одной колонки на малых экранах.

Элементы автоматически перестраиваются при изменении ширины контейнера, сохраняя пропорции и расположение.

Интеграция с Vuex или Pinia

Для больших проектов полезно хранить состояние сетки в глобальном хранилище:

// В store
state: {
  gridItems: []
},
mutations: {
  setItems(state, items) { state.gridItems = items; }
},
actions: {
  addItem({ commit, state }, item) {
    commit('setItems', [...state.gridItems, item]);
  }
}

В компоненте Vue данные сетки становятся реактивными, и любые изменения в хранилище автоматически отображаются в сетке Gridstack.

Оптимизация производительности

  • Использовать batchUpdate() и commit() при массовом добавлении элементов.
  • Ограничивать анимацию при большом количестве виджетов.
  • Хранить состояние сетки и размеры элементов для восстановления при перезагрузке страницы.

Эти подходы позволяют построить полностью интерактивные, динамичные и адаптивные дашборды и интерфейсы на Vue.js с использованием возможностей Gridstack.js, сохраняя высокую производительность и управляемость состояния.

Оглавление