Компонент Modal, основанный на Vue.js, для слоя управления: использование без дополнительных пакетов

Компонент Modal для слоя управления, основанный на Vue.js и не требующий дополнительных пакетов, таких как webpackage, можно использовать сразу после импорта JavaScript и CSS. Не нужно заранее объявлять Modal на странице — он создаётся динамически и присоединяется к странице. После закрытия компонент автоматически удаляется, что обеспечивает удобство и быстроту работы. Компонент поддерживает различные размеры страниц, передачу параметров через страницы и функции обратного вызова.

Для просмотра эффекта скачайте и разверните приложение, а затем просмотрите страницу example.html.

Импорт компонента:

1. Импортируйте Vue.js.
2. Импортируйте файлы из папки fastdialog.

Использование компонента:

• Для обычного открытия страницы используйте следующий код:

OpenDialog("111", "打开窗口", "newpage1.html", "600", "1200");

Параметры: dialog-идентификатор, заголовок страницы, URL страницы, высота страницы, ширина страницы.

• Чтобы открыть страницу с использованием процентных значений для высоты и ширины, используйте следующий код:

OpenDialog("111", "打开窗口", "newpage1.html", "70", "80", null, null, "%");

Примечание: восьмой параметр определяет единицы измерения для ширины и высоты. Если параметр не указан, по умолчанию используются пиксели (px).

• После закрытия открытой страницы на главной странице будет вызвана функция обратного вызова:

OpenDialog("222", "关闭窗口 есть функция обратного вызова", "newpage1.html", "600", "1200", AfterClose);

• После закрытия открытой страницы на главной странице будет вызвана функция обратного вызова, которая также получит возвращаемое значение закрытой страницы:

 OpenDialog("333", "Функция обратного вызова содержит возвращаемое значение", "newpage1.html", "600", "1200", AfterCloseWithReturn);
 function AfterCloseWithReturn(ReturnValue) {
        alert("page1 вернула параметр: " + ReturnValue);
 }

• Откройте страницу и передайте параметр:

 OpenDialog("444", "Есть функция обратного вызова и передача параметра", "newpage1.html", "600", "1200", AfterCloseWithReturn, "125sds");

• Получите параметр при открытии страницы:

var params = GetParams();
 if (params && params != "undefined") {
     alert("Полученный параметр открытой страницы: " + params);
}

• Закройте открытую страницу:

CloseDialog();

• Закройте открытую страницу и отправьте возвращаемое значение на главную страницу, используя функцию обратного вызова в сочетании с параметром 3:

CloseDialog("page1 вернула 222222");

• Откройте страницу в верхнем окне, обычно используется в iframe:

OpenTopDialog("777777", "Есть функция обратного вызова и передача параметра", "newpage2.html", "500", "1000", AfterCloseWithReturn, "page1-page2 передал параметр");

• Закройте страницу верхнего окна и отправьте возвращаемый параметр на главную страницу:

CloseDialog("page2 вернула 111111","page3");

Примечание: метод CloseDialog используется для закрытия страницы, открытой с помощью метода OpenDialog. При закрытии страницы, открытой методом OpenTopDialog, необходимо передать два параметра: возвращаемое значение и идентификатор диалога. Если возвращаемого значения нет, передаётся значение null. Если одна страница открывается с помощью методов OpenDialog и OpenTopDialog одновременно, оба параметра должны быть переданы.

• Откройте обычное окно предупреждения:

 OpenAlert("Предупреждение", "Пожалуйста, завершите обработку в установленный срок!");

После закрытия окна предупреждения будет вызван обратный вызов.

• Откройте окно успешного предупреждения:

OpenSuccess("Предупреждение", "Пожалуйста, завершите обработку в установленный срок!");

• Откройте окно предупреждающего сообщения:

 OpenWaring("Предупреждение", "Пожалуйста, завершите обработку в установленный срок!", null, "Понял");

• Откройте окно неудачного предупреждения:

 OpenFail("Предупреждение", "Пожалуйста, завершите обработку в установленный срок!");

• Откройте подтверждающее предупреждение:

OpenConfirm("Подтверждающее предупреждение", "Хотите ли вы удалить текущие данные?", function () {
                OpenSuccess("Предупреждение", "Удаление успешно");
            });
  OpenConfirm("Подтверждающее предупреждение", "Хотите ли вы удалить текущие данные?", function (), "Подтвердить удаление", "Отменить операцию");

Примечание:

1. Окно предупреждения (alert) принимает четыре параметра: заголовок, сообщение, функция обратного вызова и текст кнопки закрытия.
2. Подтверждающее окно (confirm) принимает пять параметров: заголовок, сообщение, функция подтверждения, текст кнопки подтверждения и текст кнопки отмены.