Полноэкранные диалоги

Полноэкранные диалоги (fullscreen dialogs) представляют собой модальные окна, которые занимают весь экран, позволяя сосредоточить внимание пользователя на содержимом без отвлекающих элементов интерфейса. В библиотеке Element Plus они реализуются через компонент ElDialog с настройкой размера и режимом полноэкранного отображения.

Основная структура компонента

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="100%"
    fullscreen
    :before-close="handleClose"
  >
    <template #title>
      Полноэкранный диалог
    </template>

    <div class="dialog-content">
      <p>Здесь располагается основной контент диалога.</p>
      <el-button type="primary" @click="dialogVisible = false">Закрыть</el-button>
    </div>
  </el-dialog>
</template>

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

export default {
  setup() {
    const dialogVisible = ref(false);

    const handleClose = (done) => {
      console.log('Диалог закрывается');
      done();
    };

    return { dialogVisible, handleClose };
  }
};
</script>

<style scoped>
.dialog-content {
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
</style>

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

  • Атрибут fullscreen автоматически растягивает диалог на весь экран.
  • width="100%" гарантирует, что ширина диалога полностью покрывает видимую область.
  • Слот #title используется для кастомного заголовка, который может включать кнопки управления.
  • before-close позволяет перехватывать событие закрытия для проверки условий или выполнения действий перед закрытием.

Управление состоянием диалога

Использование реактивной переменной через ref обеспечивает синхронизацию состояния диалога с интерфейсом. Атрибут :visible.sync="dialogVisible" делает видимость диалога двусторонней: изменения переменной автоматически открывают или закрывают модальное окно.

dialogVisible.value = true; // открытие диалога
dialogVisible.value = false; // закрытие диалога

Настройка прокрутки и контента

Для полноэкранного диалога важно корректно управлять внутренним скроллом, особенно если контент превышает высоту окна браузера. Использование CSS свойства overflow-y: auto и установки высоты через calc(100vh - размер_заголовка) позволяет сохранять видимость заголовка и прокручивать основной контент:

.dialog-content {
  padding: 20px;
  height: calc(100vh - 60px); /* 60px — пример высоты заголовка */
  overflow-y: auto;
}

Кастомизация заголовка и футера

В полноэкранных диалогах часто требуется разместить дополнительные кнопки управления или элементы навигации. Слоты #title и #footer предоставляют полную свободу:

<template #title>
  <span>Редактирование профиля</span>
  <el-button type="text" @click="dialogVisible = false">Закрыть</el-button>
</template>

<template #footer>
  <el-button @click="dialogVisible = false">Отмена</el-button>
  <el-button type="primary">Сохранить</el-button>
</template>

Адаптивность и работа на мобильных устройствах

Полноэкранные диалоги автоматически подстраиваются под размеры экрана. На мобильных устройствах они занимают всю видимую область, обеспечивая удобное взаимодействие с элементами управления. Для улучшения UX можно использовать медиазапросы в стилях:

@media (max-width: 768px) {
  .dialog-content {
    padding: 10px;
  }
}

Программное открытие и закрытие

Диалог можно открывать и закрывать не только через привязку к ref, но и программно, используя методы компонента:

const openDialog = () => { dialogVisible.value = true; };
const closeDialog = () => { dialogVisible.value = false; };

Такой подход позволяет интегрировать полноэкранный диалог с глобальными событиями или системами управления состоянием, например, Vuex или Pinia.

Использование с формами и динамическим контентом

Полноэкранные диалоги идеально подходят для размещения больших форм или сложных интерфейсных модулей. Элементы ElForm, ElTable, ElTabs и другие компоненты Element Plus можно использовать внутри ElDialog, сохраняя удобство взаимодействия и прокрутки:

<el-dialog :visible.sync="dialogVisible" fullscreen>
  <el-form :model="formData">
    <el-form-item label="Имя">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="Email">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
  </el-form>
</el-dialog>

Анимация и переходы

Element Plus поддерживает встроенные переходы для диалогов через Vue transition. Для полноэкранного диалога можно добавить кастомные анимации:

<el-dialog
  :visible.sync="dialogVisible"
  fullscreen
  v-slot="{ visible }"
>
  <transition name="fade-slide">
    <div v-if="visible" class="dialog-content">
      Содержимое с анимацией
    </div>
  </transition>
</el-dialog>

<style>
.fade-slide-enter-active, .fade-slide-leave-active {
  transition: all 0.3s ease;
}
.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}
.fade-slide-enter-to {
  opacity: 1;
  transform: translateY(0);
}
.fade-slide-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

Интеграция с Vue Router

Для создания полноэкранных диалогов, которые зависят от маршрута, можно использовать реактивное управление видимостью через watch на $route. Это позволяет открывать диалог при переходе на определённый путь и закрывать при уходе с него:

watch(() => route.path, (newPath) => {
  if (newPath === '/fullscreen-dialog') dialogVisible.value = true;
  else dialogVisible.value = false;
});

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

Оглавление