Предотвращение закрытия

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

Свойство before-close

Основной инструмент для контроля закрытия модального окна — это свойство before-close. Оно позволяет перехватывать событие закрытия и выполнять собственную логику перед фактическим закрытием окна.

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="Форма данных"
    :before-close="handleBeforeClose">
    <span>Заполните все обязательные поля перед закрытием.</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Отмена</el-button>
      <el-button type="primary" @click="submitForm">Сохранить</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formValid: false
    };
  },
  methods: {
    handleBeforeClose(done) {
      if (!this.formValid) {
        this.$confirm('Форма не заполнена полностью. Закрыть окно?')
          .then(() => done())
          .catch(() => {});
      } else {
        done();
      }
    },
    submitForm() {
      this.formValid = true;
      this.dialogVisible = false;
    }
  }
}
</script>

Разбор кода:

  • :before-close="handleBeforeClose" — привязывает метод, который будет вызываться перед закрытием.
  • done() — функция, которая завершает процесс закрытия. Без её вызова окно не закроется.
  • Использование $confirm позволяет запросить подтверждение пользователя, прежде чем потерять данные.

Предотвращение закрытия при клике вне окна

По умолчанию модальные окна можно закрывать кликом по затемнённой области вокруг диалога. Для отключения этого поведения используется свойство close-on-click-modal:

<el-dialog
  :visible.sync="dialogVisible"
  title="Защита данных"
  :close-on-click-modal="false"
  :before-close="handleBeforeClose">
</el-dialog>

Установка :close-on-click-modal="false" предотвращает закрытие диалога при случайном нажатии вне окна.

Контроль закрытия через клавишу Esc

Аналогично, закрытие по клавише Esc может быть отключено с помощью свойства close-on-press-escape:

<el-dialog
  :visible.sync="dialogVisible"
  title="Форма"
  :close-on-press-escape="false"
  :before-close="handleBeforeClose">
</el-dialog>

Это особенно важно для предотвращения потери данных при случайном нажатии Esc.

Комбинирование всех защитных механизмов

Для полной защиты формы или критической информации можно комбинировать все три подхода:

<el-dialog
  :visible.sync="dialogVisible"
  title="Критическая форма"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  :before-close="handleBeforeClose">
</el-dialog>

В такой конфигурации закрытие будет возможно только через явное действие пользователя (например, кнопка “Сохранить” или подтверждение через диалог подтверждения).

Динамическое управление закрытием

Иногда требуется динамически разрешать или запрещать закрытие, например, в зависимости от состояния формы или текущего шага процесса. Это можно реализовать через флаг внутри метода before-close:

handleBeforeClose(done) {
  if (this.currentStep < this.maxStep) {
    this.$message({
      type: 'warning',
      message: 'Сначала завершите все шаги процесса.'
    });
  } else {
    done();
  }
}

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

Практические рекомендации

  • Всегда использовать done() для контроля закрытия, иначе окно может закрыться неконтролируемо.
  • Для форм с большим количеством полей рекомендуется комбинировать before-close с отключением закрытия по клику вне окна и Esc.
  • Для многошаговых процессов можно хранить текущий шаг в data() и проверять его перед вызовом done().
  • Для улучшения UX можно показывать всплывающие сообщения или диалог подтверждения вместо мгновенного блокирования закрытия.

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

Оглавление