Пользовательские модальные окна

В библиотеке Element Plus модальные окна реализуются через компонент ElDialog. Этот компонент предоставляет базовую структуру модального окна с возможностью задания заголовка, содержимого и действий пользователя. Основные свойства компонента:

  • v-model:visible – реактивное состояние видимости модального окна.
  • title – заголовок окна.
  • width – ширина окна (можно указывать в пикселях или процентах).
  • modal – управление затемнением фона; по умолчанию true.
  • destroy-on-close – удаляет содержимое окна из DOM при закрытии, освобождая ресурсы.
  • before-close – функция, вызываемая перед закрытием окна, позволяет реализовать кастомную логику подтверждения.

Пример базового модального окна:

<template>
  <el-button @click="dialogVisible = true">Открыть окно</el-button>
  
  <el-dialog
    v-model:visible="dialogVisible"
    title="Пример окна"
    width="50%">
    <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>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    confirmAction() {
      console.log('Действие подтверждено');
      this.dialogVisible = false;
    }
  }
};
</script>

Управление динамическим содержимым

Element Plus позволяет передавать содержимое модального окна через слоты. Это особенно полезно при работе с динамическими компонентами или формами:

<el-dialog v-model:visible="dialogVisible" title="Форма пользователя">
  <user-form :user="currentUser" @submit="handleSubmit"/>
</el-dialog>
  • Слот default – основной контент окна.
  • Слот footer – кастомная панель кнопок, обычно для действий «Отмена» и «Подтвердить».

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

Асинхронные действия и подтверждения

Для модальных окон часто требуется выполнить асинхронные операции, например, запрос к API перед закрытием окна. Element Plus поддерживает функцию before-close, где можно вернуть Promise:

<el-dialog
  v-model:visible="dialogVisible"
  title="Подтверждение"
  :before-close="handleBeforeClose">
  <p>Вы уверены, что хотите удалить запись?</p>
</el-dialog>

<script>
methods: {
  handleBeforeClose(done) {
    this.$confirm('Подтвердите удаление')
      .then(() => {
        done(); // закрытие окна
      })
      .catch(() => {
        // отмена закрытия
      });
  }
}
</script>

Такой подход обеспечивает контроль закрытия окна и предотвращает потерю данных при асинхронных процессах.

Настройка анимации и позиции

Компонент ElDialog поддерживает кастомные анимации и позиционирование:

  • Свойство center центрирует окно по вертикали.
  • Свойство top задаёт отступ сверху, например top="20vh".
  • CSS-анимации можно задать через :open-delay, :close-delay или через классы custom-class.

Пример настройки позиции и анимации:

<el-dialog
  v-model:visible="dialogVisible"
  title="Анимированное окно"
  top="10vh"
  custom-class="fade-dialog">
</el-dialog>

<style>
.fade-dialog {
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>

Комбинация с формами и валидацией

Частый сценарий использования модальных окон – работа с формами. Для этого применяется ElForm внутри ElDialog с полной поддержкой валидации:

<el-dialog v-model:visible="dialogVisible" title="Регистрация">
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="form.name"/>
    </el-form-item>
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email"/>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Отмена</el-button>
    <el-button type="primary" @click="submitForm">Сохранить</el-button>
  </span>
</el-dialog>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: { name: '', email: '' },
      rules: {
        name: [{ required: true, message: 'Введите имя', trigger: 'blur' }],
        email: [{ required: true, message: 'Введите email', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('Форма валидна', this.form);
          this.dialogVisible = false;
        }
      });
    }
  }
};
</script>

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

Управление множественными модальными окнами

Element Plus поддерживает одновременное открытие нескольких окон. Для корректного управления видимостью каждого окна рекомендуется использовать отдельные реактивные свойства или массив объектов:

<el-dialog v-for="(dlg, index) in dialogs" :key="index" v-model:visible="dlg.visible">
  <p>{{ dlg.content }}</p>
</el-dialog>

<script>
export default {
  data() {
    return {
      dialogs: [
        { visible: false, content: 'Первое окно' },
        { visible: false, content: 'Второе окно' }
      ]
    };
  }
};
</script>

Такой подход обеспечивает точный контроль за каждым модальным окном без конфликтов.

Динамическое создание модальных окон программно

Для ситуаций, когда необходимо создавать окна на лету, применяется программный вызов ElDialog через функцию ElMessageBox:

import { ElMessageBox } from 'element-plus';

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

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

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

Оглавление