1//
2import {addGroupSetting} from "vue-dlg/src/DialogGroupSettings";
3
4// задаем настройки для разных групп
5addGroupSetting('modal', {
6  // максимальное количество модальных окон на экране в этой группе
7  maxDisplayItem: 1,
8  // показывать overlay?
9  overlay      : true,
10});
11
12addGroupSetting('notify', {
13  maxDisplayItem: 3,
14  overlay      : false,
15});

1// Тонкий клиент
2import DialogThinClient from 'vue-dlg/src/DialogThinClient';
3// Темплейты модальных окон
4import DialogBox        from "vue-dlg/src/Template/DialogBox";
5import DialogNotify     from "vue-dlg/src/Template/DialogNotify";
6
7// настраиваем список модальных окон
8export default {
9  open: DialogThinClient, // function (VueComponent, VueComponentProps, setting)
10
11  alert: {
12    success: (message) => {
13      return DialogThinClient(
14              DialogBox,
15              { title: "Успешно", message: message, okLabel: 'Ok', theme: "success", },
16              { group: 'modal' }
17      );
18    },
19    warning: (message) => {
20      return DialogThinClient(
21              DialogBox,
22              { title: "Предупреждение", message: message, okLabel: 'Ok', theme: "warning" },
23              { group: 'modal' }
24      );
25    },
26    error: (message) => {
27      return DialogThinClient(
28              DialogBox,
29              { title: "Ошибка", message: message, okLabel: 'Ok', theme: "error" },
30              { group: 'modal' }
31      );
32    },
33  },
34
35  confirm(message, options = {}){
36    return DialogThinClient(
37            DialogBox,
38            {
39              title: "Подтвердите действие",
40              message: message,
41              okLabel: (options && options.okLabel) ? options.okLabel : 'Ok',
42              cancelLabel: (options && options.cancelLabel) ? options.cancelLabel : 'Отмена',
43            },
44            { group: 'modal' }
45    );
46  },
47
48  notify: (title, message) => {
49    return DialogThinClient(
50            DialogNotify,
51            { title: title, message: message },
52            { group: 'notify' }
53    );
54  }
55};

1
2.dlg .dlg-overlay {
3  background: var(--dlg-overlay, rgba(0,0,0,0.5));
4  cursor: default;
5  display: block;
6  position: fixed;
7  top: 0;
8  left: 0;
9  right: 0;
10  bottom: 0;
11}
12
13.dlg .dlg-container{
14  pointer-events: none;
15  & > div {
16    pointer-events: all;
17  }
18}
19
20.dlg .dlg-container.dlg-container-notify{
21  position: fixed;
22  left: 10px;
23  top: 10px;
24  width: 320px;
25  z-index: 420;
26
27  & > div {
28    margin-bottom: 5px;
29  }
30  & > div:last-child {
31    margin-bottom: 0px;
32  }
33
34}
35
36
37.dlg .dlg-container.dlg-container-modal {
38
39  position: fixed;
40  top: 0;
41  left: 0;
42  right: 0;
43  bottom: 0;
44  z-index: 400;
45
46  overflow: hidden;
47  opacity: 1;
48
49  display: flex;
50  display: -ms-flexbox;
51  align-items: center;
52  -ms-flex-align: center;
53  -ms-flex-pack: center;
54  justify-content: center;
55
56
57  & > div {
58    width: 100%;
59    max-width: 740px;
60    padding-left: 20px;
61    padding-right: 20px;
62    margin-bottom: 20px;
63  }
64  & > div:last-child {
65    margin-bottom: 0px;
66  }
67}

1// Подключаем плагин
2import vueDlgPlugin from "vue-dlg/src/plugin";
3
4// настройки модальных групп
5import "./group-settings";
6// задаем стили
7import './style.scss';
8// список настроенных действий
9import dialogAction from "./action";
10
11// опционально можно сделать глобальным
12// global.DIALOG = dialogAction;
13
14// фасад для установки плагина (чтоб не перегружать основной main.js) 
15export default {
16  install: (app) => {
17    vueDlgPlugin.install(app, {action: dialogAction});
18  },
19};

1import { createApp } from 'vue';
2// [ADD]
3import vueDlgPluginProxy from './plugin/vue-dlg'
4// ...
5
6let app = createApp(App)
7// [ADD]
8app.use(vueDlgPluginProxy);
9// ...
10app.use(router);
11app.mount('#app');
12

1<template>
2  <DialogCore />
3  <!-- -->
4  <router-view />
5</template>
6
7<script>
8import DialogCore from "vue-dlg/src/DialogCore";
9
10export default {
11  component: {
12    DialogCore,
13    // ...
14  }
15  // ...
16}
17</script>