Базовое использование Dialog

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

Импорт и регистрация компонента

Для использования Dialog необходимо импортировать компонент в ваш проект и зарегистрировать его:

import { ElDialog, ElButton } from 'element-plus';
import 'element-plus/dist/index.css';

При использовании Vue 3 с синтаксисом Composition API регистрация компонентов может выглядеть так:

export default {
  components: {
    ElDialog,
    ElButton
  }
};

Если используется глобальная регистрация через app.use(ElementPlus), явная регистрация компонентов не требуется.

Основная структура Dialog

Диалоговое окно строится вокруг директивы v-model, которая управляет видимостью компонента:

<template>
  <el-button @click="dialogVisible = true">Открыть диалог</el-button>

  <el-dialog
    title="Пример диалога"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <span>Содержимое диалога может быть любым: текст, формы, таблицы.</span>
    <template #footer>
      <el-button @click="dialogVisible = false">Отмена</el-button>
      <el-button type="primary" @click="confirmAction">Подтвердить</el-button>
    </template>
  </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 – управляет отображением диалога. При true диалог открыт, при false закрыт.
title – заголовок диалога. Может быть строкой или слотом для кастомного контента.
width – ширина окна, поддерживается как в пикселях (600px), так и в процентах (50%).
modal – логическое значение, определяет, будет ли фон затемнён (по умолчанию true).
before-close – функция обратного вызова, вызываемая перед закрытием диалога. Позволяет реализовать подтверждение закрытия.

Слоты в Dialog

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

#header – позволяет полностью кастомизировать заголовок.
default – основной контент диалога. Можно использовать любые Vue-компоненты, таблицы, формы и т. д.
#footer – нижняя панель кнопок. Часто используется для кнопок “Отмена” и “Подтвердить”.

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

<el-dialog :visible.sync="dialogVisible">
  <template #header>
    <h3 style="color: red;">Кастомный заголовок</h3>
  </template>
  
  <p>Текст основного содержимого</p>

  <template #footer>
    <el-button @click="dialogVisible = false">Закрыть</el-button>
    <el-button type="primary">Сохранить</el-button>
  </template>
</el-dialog>

Модальные и неблокирующие диалоги

Модальный (modal=true) – блокирует взаимодействие с остальной страницей.
Неблокирующий (modal=false) – позволяет пользователю работать с другими элементами страницы, не закрывая диалог.

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

Dialog поддерживает встроенные анимации через Vue Transition. Можно менять эффект появления с помощью свойства :modal-append-to-body и кастомных CSS-классов.

<el-dialog
  :visible.sync="dialogVisible"
  custom-class="fade-dialog">
</el-dialog>

<style>
.fade-dialog {
  transition: all 0.3s ease;
}
</style>

Управление размерами и положением

top – отступ сверху, например top="15vh".
width – ширина, может быть выражена в % или px.
fullscreen – диалог открывается на весь экран, игнорируя ширину и высоту.

Пример использования полноэкранного диалога:

<el-dialog :visible.sync="dialogVisible" fullscreen>
  <p>Полноэкранный диалог</p>
</el-dialog>

Динамическое создание диалогов

Dialog можно создавать программно через ElMessageBox (аналог alert/confirm), что полезно для уведомлений без явного рендера в шаблоне:

import { ElMessageBox } from 'element-plus';

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