Программное открытие диалогов

Для использования диалогов в Element Plus необходимо сначала подключить библиотеку к проекту. Если используется Vue 3, рекомендуется установка через npm или yarn:

npm install element-plus --save

или

yarn add element-plus

После установки библиотеку подключают в main.js или main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

Эта настройка обеспечивает глобальное использование всех компонентов Element Plus, включая диалоги (ElDialog).

Основы компонента Dialog

Компонент ElDialog предназначен для отображения модальных окон. Ключевые свойства:

  • model-value – управляет видимостью диалога.
  • title – заголовок окна.
  • width – ширина диалога.
  • before-close – функция, вызываемая перед закрытием (можно использовать для подтверждений).

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

Особенности:

  • Состояние диалога хранится во data.
  • Использование слота footer позволяет кастомизировать кнопки управления.
  • Событие @close можно использовать для логирования или выполнения дополнительных действий.

Программное открытие диалогов

Помимо стандартного связывания с v-model (model-value), Element Plus поддерживает программное управление диалогом через методы. Это удобно для динамического создания и отображения диалогов без предварительной разметки.

Использование ElMessageBox

Для быстрого открытия модального окна используется ElMessageBox. Импорт:

import { ElMessageBox, ElMessage } from 'element-plus';

Обычный диалог с подтверждением

ElMessageBox.confirm('Вы действительно хотите удалить элемент?', 'Внимание', {
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
  type: 'warning',
}).then(() => {
  ElMessage({
    type: 'success',
    message: 'Элемент удалён'
  });
}).catch(() => {
  ElMessage({
    type: 'info',
    message: 'Удаление отменено'
  });
});

Пояснения:

  • Метод confirm возвращает Promise, что позволяет обрабатывать результат через .then() и .catch().
  • Опции confirmButtonText и cancelButtonText задают подписи кнопок.
  • type влияет на визуальное оформление.

Программное открытие произвольного контента

Метод ElMessageBox поддерживает создание диалога с пользовательским HTML или компонентами:

ElMessageBox({
  title: 'Настройки',
  message: 'Выберите параметры:',
  dangerouslyUseHTMLString: true,
  showCancelButton: true,
  confirmButtonText: 'Сохранить',
  cancelButtonText: 'Отмена',
  callback(action) {
    if (action === 'confirm') {
      console.log('Параметры сохранены');
    } else {
      console.log('Изменения отменены');
    }
  }
});

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

  • dangerouslyUseHTMLString позволяет использовать HTML в сообщении.
  • callback – альтернативный способ обработки закрытия, если не нужен Promise.

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

Можно программно создавать диалоги на основе Vue-компонентов, что особенно удобно для сложных интерфейсов.

import { h, render } from 'vue';
import MyDialogContent from './MyDialogContent.vue';

function openDynamicDialog() {
  const container = document.createElement('div');
  document.body.appendChild(container);

  const vnode = h('el-dialog', {
    modelValue: true,
    title: 'Динамический диалог',
    width: '600px',
    'onUpdate:modelValue': (val) => {
      if (!val) {
        render(null, container);
        document.body.removeChild(container);
      }
    }
  }, {
    default: () => h(MyDialogContent),
    footer: () => h('el-button', {
      onClick: () => vnode.component.props['onUpdate:modelValue'](false)
    }, 'Закрыть')
  });

  render(vnode, container);
}

Особенности метода:

  • Используется API h и render для создания виртуального узла.
  • Диалог полностью удаляется из DOM после закрытия.
  • Можно вставлять любые Vue-компоненты внутрь модального окна.

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

Element Plus предоставляет свойства для тонкой настройки:

  • modal – наличие фоновой подложки (по умолчанию true).
  • close-on-click-modal – закрытие при клике на затемнённый фон.
  • close-on-press-escape – закрытие по нажатию Esc.
  • destroy-on-close – удаление содержимого из DOM при закрытии.
  • append-to-body – добавление диалога в конец body, полезно при работе с overflow контейнерами.

Пример:


  Содержимое настроек.

Советы по программному открытию

  • Всегда контролировать DOM: при динамическом создании диалогов необходимо удалять контейнер после закрытия.
  • Использовать Promise для удобного асинхронного управления.
  • Разделять логику и шаблон: для сложных диалогов предпочтительно выносить содержимое в отдельные компоненты.
  • Комбинировать с ElMessage и ElNotification для создания полного пользовательского опыта.
Оглавление