useDisplay

useDisplay — это Composition API-хук, предоставляемый библиотекой Vuetify, который позволяет отслеживать текущие параметры дисплея, такие как размер экрана, ориентация устройства и видимость определённых брейкпоинтов. Он особенно полезен для адаптивного дизайна и динамического управления компонентами в зависимости от ширины окна.

Импорт и инициализация

Для начала useDisplay необходимо импортировать из пакета vuetify:

import { useDisplay } from 'vuetify';

После этого создаётся экземпляр хука внутри функции setup:

export default {
  setup() {
    const display = useDisplay();
    return { display };
  }
}

display становится реактивным объектом с набором свойств, которые автоматически обновляются при изменении размеров окна или ориентации устройства.

Основные свойства useDisplay

  1. mobile Булевое значение, указывающее, является ли текущее устройство мобильным. По умолчанию возвращает true для экранов меньше 600px.

  2. xs, sm, md, lg, xl Булевы значения, соответствующие стандартным брейкпоинтам Vuetify:

    • xs: < 600px
    • sm: 600–960px
    • md: 960–1264px
    • lg: 1264–1904px
    • xl: > 1904px

    Можно использовать для условного рендеринга компонентов:

    <template>
  <v-btn v-if="display.md">Средний и большие экраны</v-btn>
</template>

  3. name Строка, возвращающая текущий брейкпоинт ('xs', 'sm', 'md', 'lg', 'xl'). Это удобно для динамического определения текущего размера экрана в логике приложения.

  4. height и width Реактивные числовые значения, отражающие текущую высоту и ширину окна браузера.

  5. mobileBreakpoint Позволяет переопределить стандартный порог, по которому определяется мобильное устройство:

    const display = useDisplay({ mobileBreakpoint: 800 });

Использование для условного отображения

useDisplay облегчает адаптивное управление компонентами. Например, можно скрывать меню на мобильных устройствах:

<template>
  <v-navigation-drawer v-if="!display.mobile">
    Меню для ПК
  </v-navigation-drawer>
</template>

Или отображать специальные уведомления для маленьких экранов:

<template>
  <v-alert v-if="display.xs">
    Оптимизировано для мобильного просмотра
  </v-alert>
</template>

Режим ориентации

useDisplay предоставляет информацию о текущей ориентации экрана:

  • landscape — true, если экран горизонтальный
  • portrait — true, если экран вертикальный

Пример условного рендеринга на основе ориентации:

<template>
  <div>
    <p v-if="display.landscape">Горизонтальная ориентация</p>
    <p v-else>Вертикальная ориентация</p>
  </div>
</template>

Реактивность и слежение за изменениями

Все свойства useDisplay являются реактивными. Изменение размера окна автоматически обновляет значения:

watch(() => display.width, (newWidth) => {
  console.log(`Новая ширина окна: ${newWidth}px`);
});

Это позволяет динамически адаптировать стили и поведение компонентов без использования сторонних библиотек или ручной обработки событий resize.

Совмещение с динамическим стилем

Использование useDisplay совместно с вычисляемыми свойствами позволяет легко управлять стилями компонентов:

const buttonSize = computed(() => {
  if (display.sm || display.xs) return 'small';
  if (display.md) return 'medium';
  return 'large';
});
<v-btn :size="buttonSize">Адаптивная кнопка</v-btn>

Пример комплексного применения

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6">
        <v-card v-if="display.md">
          Контент для средних и больших экранов
        </v-card>
      </v-col>
      <v-col cols="12" md="6">
        <v-alert v-if="display.xs || display.sm">
          Контент для маленьких экранов
        </v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { useDisplay } from 'vuetify';
import { computed } from 'vue';

export default {
  setup() {
    const display = useDisplay();
    const isSmallScreen = computed(() => display.xs || display.sm);

    return { display, isSmallScreen };
  }
}
</script>

В этом примере элементы интерфейса изменяют своё поведение и видимость в зависимости от брейкпоинтов и размеров экрана.

Настройка кастомных брейкпоинтов

useDisplay может использоваться с пользовательскими брейкпоинтами, задаваемыми через объект конфигурации Vuetify:

const vuetify = createVuetify({
  display: {
    thresholds: {
      xs: 0,
      sm: 500,
      md: 900,
      lg: 1400,
      xl: 1800
    },
    mobileBreakpoint: 500
  }
});

Это позволяет адаптировать интерфейс под нестандартные устройства и экраны.

Заключение по возможностям

useDisplay обеспечивает:

  • Простую и реактивную работу с размерами окна и брейкпоинтами.
  • Удобное управление отображением компонентов для разных устройств.
  • Информацию о текущей ориентации экрана.
  • Поддержку пользовательских порогов для мобильных устройств.
  • Полную интеграцию с Composition API и реактивными вычислениями в Vue 3.

Это делает useDisplay мощным инструментом для реализации адаптивных интерфейсов в проектах на Vuetify.

Оглавление