Dialog

Компонент Dialog предназначен для создания модальных окон, которые используются для отображения дополнительной информации, подтверждения действий или ввода данных пользователем. В Element Plus Dialog является обёрткой над стандартным HTML-модальным окном с расширенными возможностями управления и стилизации.

<template>
  <el-dialog
    title="Пример диалога"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <p>Содержимое модального окна.</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Отмена</el-button>
      <el-button type="primary" @click="confirmAction">Подтвердить</el-button>
    </span>
  </el-dialog>
</template>

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

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

    const handleClose = (done) => {
      console.log('Попытка закрытия диалога');
      done();
    };

    const confirmAction = () => {
      console.log('Действие подтверждено');
      dialogVisible.value = false;
    };

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

Ключевые свойства

  • visible / v-model:visible — управляет отображением окна. Принимает булево значение. Синхронизация с v-model позволяет управлять открытием и закрытием извне.
  • title — заголовок модального окна. Может быть строкой или слотом для кастомного контента.
  • width — ширина диалога. Можно задавать в пикселях или процентах.
  • before-close — функция-хук, вызываемая перед закрытием окна. Может использоваться для подтверждения или сохранения данных.
  • modal — управляет отображением фона-модали. По умолчанию true.
  • close-on-click-modal — позволяет закрывать окно при клике по затемнённой области. По умолчанию true.
  • destroy-on-close — полностью удаляет содержимое окна при его закрытии, освобождая память. Полезно при динамическом контенте.

Слоты

Dialog поддерживает несколько слотов для расширенной кастомизации:

  • default — основной контент диалога.
  • title — позволяет задать кастомный заголовок вместо строки.
  • footer — слот для кнопок действий, таких как «Сохранить» или «Отмена». Если слот не используется, отображается стандартная кнопка закрытия.
<el-dialog :visible.sync="dialogVisible">
  <template #title>
    <h3>Кастомный заголовок</h3>
  </template>
  <template #footer>
    <el-button @click="dialogVisible = false">Закрыть</el-button>
    <el-button type="primary">Сохранить</el-button>
  </template>
</el-dialog>

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

Dialog поддерживает несколько событий:

  • open — вызывается при открытии окна.
  • opened — вызывается после завершения анимации открытия.
  • close — вызывается при закрытии окна.
  • closed — вызывается после завершения анимации закрытия.

Пример использования событий:

<el-dialog
  :visible.sync="dialogVisible"
  @open="onOpen"
  @close="onClose"
>
  Контент окна
</el-dialog>

<script>
const onO pen = () => console.log('Окно открылось');
const onCl ose = () => console.log('Окно закрывается');
</script>

Адаптивные и динамические диалоги

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

<el-dialog
  :visible.sync="dialogVisible"
  :width="dynamicWidth + 'px'"
>
  <component :is="dynamicComponent" />
</el-dialog>

<script>
import DynamicComponent from './DynamicComponent.vue';
const dialogVisible = ref(false);
const dynamicWidth = ref(600);
const dynamicComponent = ref(DynamicComponent);
</script>

Диалоги с подтверждением

Часто Dialog применяется для подтверждения действий пользователя:

const confirmDelete = () => {
  ElMessageBox.confirm(
    'Вы уверены, что хотите удалить элемент?',
    'Предупреждение',
    {
      confirmButtonText: 'Удалить',
      cancelButtonText: 'Отмена',
      type: 'warning',
    }
  )
    .then(() => console.log('Элемент удалён'))
    .catch(() => console.log('Действие отменено'));
};

Использование ElMessageBox позволяет создать готовый к работе диалог подтверждения без необходимости самостоятельно настраивать слоты и события.

Настройка стиля и анимации

Dialog поддерживает кастомизацию через CSS-переменные и встроенные классы:

  • .el-dialog__header — заголовок.
  • .el-dialog__body — основной контент.
  • .el-dialog__footer — область кнопок действий.
  • CSS-переменные: --el-dialog-z-index, --el-dialog-header-font-size, --el-dialog-body-padding.

Анимации открытия и закрытия можно менять через свойство transition:

<el-dialog
  :visible.sync="dialogVisible"
  transition="el-fade-in-linear"
>
  Контент
</el-dialog>

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

Dialog часто включают внутрь форм для ввода данных, совместно с el-form:

<el-dialog :visible.sync="dialogVisible" title="Форма">
  <el-form :model="formData">
    <el-form-item label="Имя">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="Электронная почта">
      <el-input v-model="formData.email" />
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="dialogVisible = false">Отмена</el-button>
    <el-button type="primary" @click="submitForm">Сохранить</el-button>
  </template>
</el-dialog>

<script>
const formData = ref({ name: '', email: '' });
const submitForm = () => {
  console.log('Данные формы:', formData.value);
  dialogVisible.value = false;
};
</script>

Dialog в Element Plus является гибким инструментом для создания интерактивных интерфейсов. Он поддерживает полное управление отображением, кастомизацию заголовков и футеров, динамическое содержимое и интеграцию с формами, делая его универсальным компонентом для современных приложений на Vue 3.

Оглавление