QResizeObserver отслеживание размеров

QResizeObserver — это компонент библиотеки Quasar Framework, предназначенный для отслеживания изменений размеров элементов DOM. Он работает как обёртка над стандартным ResizeObserver браузера, предоставляя удобный интерфейс для реактивного управления размерами в приложениях на Vue.js.

Основные возможности

  • Реактивное отслеживание размеров — компонент автоматически обновляет переданные данные при изменении ширины или высоты элемента.
  • Минимальное потребление ресурсов — QResizeObserver оптимизирован для работы с большим количеством элементов без значительной нагрузки на рендеринг.
  • Простая интеграция — используется как любой другой компонент Quasar, совместим с Vue 3 и Composition API.

Подключение и базовое использование

QResizeObserver импортируется из пакета Quasar и используется внутри шаблона:

<template>
  <div>
    <q-resize-observer @resize="onResize" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { QResizeObserver } from 'quasar'

const width = ref(0)
const height = ref(0)

function onResize({ width: w, height: h }) {
  width.value = w
  height.value = h
}
</script>

Разбор кода:

  • @resize — событие, которое срабатывает при изменении размеров родительского элемента.
  • Аргумент события содержит объект { width, height }.
  • В Composition API можно хранить значения в реактивных переменных ref для дальнейшего использования в шаблоне или логике.

Отслеживание конкретного элемента

QResizeObserver можно привязать к конкретному элементу, используя слот default:

<q-resize-observer @resize="handleResize">
  <template #default="{ width, height }">
    <div :style="{ width: width + 'px', height: height + 'px' }">
      Размеры: {{ width }} x {{ height }}
    </div>
  </template>
</q-resize-observer>

Особенности:

  • В слоте передаются актуальные значения ширины и высоты.
  • Можно динамически изменять стиль или контент в зависимости от размеров.
  • Позволяет создавать адаптивные компоненты без необходимости слушать события окна.

Работа с Composition API

QResizeObserver отлично сочетается с Composition API Vue 3:

<script setup>
import { ref } from 'vue'

const elementSize = ref({ width: 0, height: 0 })

function updateSize(size) {
  elementSize.value = size
}
</script>

<template>
  <q-resize-observer @resize="updateSize" />
  <p>Ширина: {{ elementSize.width }}, Высота: {{ elementSize.height }}</p>
</template>
  • Объект elementSize хранит актуальные значения размеров.
  • Любые вычисляемые свойства или watch-эффекты могут реагировать на эти изменения.

Свойства и слоты

Свойства QResizeObserver:

  • debounce — задаёт задержку в миллисекундах перед срабатыванием события resize. Полезно при частых изменениях размеров.
  • observeParents — позволяет отслеживать изменения размеров не только элемента, но и его родительских контейнеров.
  • disabled — временно отключает наблюдение.

Слоты:

  • default — предоставляет реактивные значения width и height, чтобы использовать их внутри шаблона напрямую.

Практические примеры использования

  1. Адаптивная сетка компонентов
<q-resize-observer v-slot="{ width }">
  <q-card :style="{ width: width / 3 + 'px' }">Контент</q-card>
</q-resize-observer>
  • Размер карточки автоматически изменяется в зависимости от ширины родителя.
  1. Динамическая подгонка текста
<q-resize-observer @resize="resizeText">
  <div :style="{ fontSize: fontSize + 'px' }">
    Текст под размер контейнера
  </div>
</q-resize-observer>

<script setup>
import { ref } from 'vue'
const fontSize = ref(14)

function resizeText({ width }) {
  fontSize.value = Math.max(12, width / 20)
}
</script>
  • Позволяет масштабировать шрифты и элементы интерфейса в зависимости от размера родителя.

Важные нюансы

  • Производительность: слишком частые изменения размеров могут вызывать лишние рендеры. Использование debounce помогает снизить нагрузку.
  • Совместимость: компонент поддерживается в браузерах, где доступен ResizeObserver. Для старых браузеров требуется полифилл.
  • Реактивность: QResizeObserver не только отслеживает размеры, но и предоставляет их в реактивной форме, что облегчает создание адаптивного интерфейса.

Итоговая структура типового использования

<q-resize-observer
  :debounce="100"
  :observe-parents="true"
  @resize="onResize"
>
  <template #default="{ width, height }">
    <div :style="{ width: width + 'px', height: height + 'px' }">
      {{ width }} x {{ height }}
    </div>
  </template>
</q-resize-observer>
  • Компонент легко интегрируется в любые Vue-компоненты.
  • Реактивное обновление размеров позволяет создавать гибкие и динамичные интерфейсы.
  • Использование слота default обеспечивает полный контроль над отображением и поведением элементов.
Оглавление