AppFullscreen

AppFullscreen — это сервис Quasar, предназначенный для управления полноэкранным режимом в веб-приложениях. Он предоставляет простой и кроссбраузерный способ перевода приложения в полноэкранный режим, отслеживания состояния и управления выходом из него.

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

Для использования AppFullscreen необходимо импортировать его из Quasar и вызвать методы через this.$q.fullscreen в компонентах Vue.

import { defineComponent } from 'vue';
import { useQuasar } from 'quasar';

export default defineComponent({
  setup() {
    const $q = useQuasar();

    const enterFullscreen = () => {
      $q.fullscreen.request();
    };

    const exitFullscreen = () => {
      $q.fullscreen.exit();
    };

    const toggleFullscreen = () => {
      $q.fullscreen.toggle();
    };

    return { enterFullscreen, exitFullscreen, toggleFullscreen };
  }
});

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

  • request(target?: HTMLElement) — переводит указанное DOM-узел (или всю страницу по умолчанию) в полноэкранный режим.
  • exit() — завершает полноэкранный режим.
  • toggle(target?: HTMLElement) — переключает состояние полноэкранного режима.
  • isActive — булевое свойство, отражающее текущее состояние полноэкранного режима.
  • isCapable — булевое свойство, показывающее, поддерживается ли полноэкранный режим в текущем браузере.

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

Полноэкранная галерея изображений

<template>
  <div>
    <img ref="imageRef" src="image.jpg" @click="toggleFullscreen" />
    <q-btn label="Войти в полноэкранный режим" @click="enterFullscreen" />
    <q-btn label="Выйти из полноэкранного режима" @click="exitFullscreen" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';

export default {
  setup() {
    const $q = useQuasar();
    const imageRef = ref(null);

    const enterFullscreen = () => $q.fullscreen.request(imageRef.value);
    const exitFullscreen = () => $q.fullscreen.exit();
    const toggleFullscreen = () => $q.fullscreen.toggle(imageRef.value);

    return { imageRef, enterFullscreen, exitFullscreen, toggleFullscreen };
  }
};
</script>

В данном примере request применяется к конкретному элементу, что позволяет выводить только изображение в полноэкранном режиме, а не всю страницу.

Прослушивание изменений состояния

AppFullscreen предоставляет возможность отслеживания событий изменения состояния через событие @fullscreen. В Composition API это реализуется через watchEffect на свойство isActive.

import { watchEffect } from 'vue';
import { useQuasar } from 'quasar';

export default {
  setup() {
    const $q = useQuasar();

    watchEffect(() => {
      if ($q.fullscreen.isActive) {
        console.log('Приложение находится в полноэкранном режиме');
      } else {
        console.log('Приложение вышло из полноэкранного режима');
      }
    });
  }
};

Это полезно для динамического изменения интерфейса: скрытие панели навигации, изменения размеров компонентов или анимаций при переходе в полноэкранный режим.

Совместимость и ограничения

  • Свойство isCapable позволяет определить поддержку полноэкранного режима браузером.
  • Некоторые браузеры (например, мобильные Safari) имеют ограничения на активацию полноэкранного режима через автоматический скрипт без взаимодействия пользователя.
  • Полноэкранный режим может блокировать элементы управления браузера, поэтому важно предусматривать кнопку выхода (exit()).

Интеграция с пользовательским интерфейсом Quasar

AppFullscreen легко комбинируется с компонентами Quasar, такими как QBtn, QToolbar и QDialog:

  • QBtn можно использовать для входа и выхода из полноэкранного режима.
  • QDialog при использовании с fullscreen может имитировать нативный полноэкранный режим на мобильных устройствах.
  • QLayout можно динамически изменять при активации полноэкранного режима (например, скрывая QHeader и QFooter).
<q-layout view="lHh Lpr lFf">
  <q-header v-if="!$q.fullscreen.isActive">Шапка приложения</q-header>
  <q-page-container>
    <q-page>
      <q-btn label="Полноэкранный режим" @click="$q.fullscreen.toggle()" />
    </q-page>
  </q-page-container>
</q-layout>

Рекомендации по использованию

  • Всегда проверять isCapable перед вызовом request, чтобы избежать ошибок в неподдерживаемых браузерах.
  • Для повышения UX обеспечивать явное действие пользователя для входа в полноэкранный режим (например, клик по кнопке или элементу).
  • Отслеживать isActive для адаптации интерфейса и скрытия ненужных элементов.

Выводы о возможностях

AppFullscreen предоставляет полный набор инструментов для управления полноэкранным режимом в веб-приложениях на Vue с Quasar. Он обеспечивает:

  • Унифицированный кроссбраузерный API
  • Управление конкретными DOM-элементами
  • Отслеживание состояния и реактивное изменение интерфейса
  • Простую интеграцию с компонентами Quasar

Использование этого сервиса повышает интерактивность и гибкость приложений, особенно для медиаконтента, презентаций и визуальных интерфейсов.

Оглавление