1 | const defaults = {
|
2 | title: null,
|
3 | message: '',
|
4 | type: '',
|
5 | iconClass: '',
|
6 | showInput: false,
|
7 | showClose: true,
|
8 | modalFade: true,
|
9 | lockScroll: true,
|
10 | closeOnClickModal: true,
|
11 | closeOnPressEscape: true,
|
12 | closeOnHashChange: true,
|
13 | inputValue: null,
|
14 | inputPlaceholder: '',
|
15 | inputType: 'text',
|
16 | inputPattern: null,
|
17 | inputValidator: null,
|
18 | inputErrorMessage: '',
|
19 | showConfirmButton: true,
|
20 | showCancelButton: false,
|
21 | confirmButtonPosition: 'right',
|
22 | confirmButtonHighlight: false,
|
23 | cancelButtonHighlight: false,
|
24 | confirmButtonText: '',
|
25 | cancelButtonText: '',
|
26 | confirmButtonClass: '',
|
27 | cancelButtonClass: '',
|
28 | customClass: '',
|
29 | beforeClose: null,
|
30 | dangerouslyUseHTMLString: false,
|
31 | center: false,
|
32 | roundButton: false,
|
33 | distinguishCancelAndClose: false
|
34 | };
|
35 |
|
36 | import Vue from 'vue';
|
37 | import msgboxVue from './main.vue';
|
38 | import merge from 'element-ui/src/utils/merge';
|
39 | import { isVNode } from 'element-ui/src/utils/vdom';
|
40 |
|
41 | const MessageBoxConstructor = Vue.extend(msgboxVue);
|
42 |
|
43 | let currentMsg, instance;
|
44 | let msgQueue = [];
|
45 |
|
46 | const defaultCallback = action => {
|
47 | if (currentMsg) {
|
48 | let callback = currentMsg.callback;
|
49 | if (typeof callback === 'function') {
|
50 | if (instance.showInput) {
|
51 | callback(instance.inputValue, action);
|
52 | } else {
|
53 | callback(action);
|
54 | }
|
55 | }
|
56 | if (currentMsg.resolve) {
|
57 | if (action === 'confirm') {
|
58 | if (instance.showInput) {
|
59 | currentMsg.resolve({ value: instance.inputValue, action });
|
60 | } else {
|
61 | currentMsg.resolve(action);
|
62 | }
|
63 | } else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {
|
64 | currentMsg.reject(action);
|
65 | }
|
66 | }
|
67 | }
|
68 | };
|
69 |
|
70 | const initInstance = () => {
|
71 | instance = new MessageBoxConstructor({
|
72 | el: document.createElement('div')
|
73 | });
|
74 |
|
75 | instance.callback = defaultCallback;
|
76 | };
|
77 |
|
78 | const showNextMsg = () => {
|
79 | if (!instance) {
|
80 | initInstance();
|
81 | }
|
82 | instance.action = '';
|
83 |
|
84 | if (!instance.visible || instance.closeTimer) {
|
85 | if (msgQueue.length > 0) {
|
86 | currentMsg = msgQueue.shift();
|
87 |
|
88 | let options = currentMsg.options;
|
89 | for (let prop in options) {
|
90 | if (options.hasOwnProperty(prop)) {
|
91 | instance[prop] = options[prop];
|
92 | }
|
93 | }
|
94 | if (options.callback === undefined) {
|
95 | instance.callback = defaultCallback;
|
96 | }
|
97 |
|
98 | let oldCb = instance.callback;
|
99 | instance.callback = (action, instance) => {
|
100 | oldCb(action, instance);
|
101 | showNextMsg();
|
102 | };
|
103 | if (isVNode(instance.message)) {
|
104 | instance.$slots.default = [instance.message];
|
105 | instance.message = null;
|
106 | } else {
|
107 | delete instance.$slots.default;
|
108 | }
|
109 | ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {
|
110 | if (instance[prop] === undefined) {
|
111 | instance[prop] = true;
|
112 | }
|
113 | });
|
114 | document.body.appendChild(instance.$el);
|
115 |
|
116 | Vue.nextTick(() => {
|
117 | instance.visible = true;
|
118 | });
|
119 | }
|
120 | }
|
121 | };
|
122 |
|
123 | const MessageBox = function(options, callback) {
|
124 | if (Vue.prototype.$isServer) return;
|
125 | if (typeof options === 'string' || isVNode(options)) {
|
126 | options = {
|
127 | message: options
|
128 | };
|
129 | if (typeof arguments[1] === 'string') {
|
130 | options.title = arguments[1];
|
131 | }
|
132 | } else if (options.callback && !callback) {
|
133 | callback = options.callback;
|
134 | }
|
135 |
|
136 | if (typeof Promise !== 'undefined') {
|
137 | return new Promise((resolve, reject) => {
|
138 | msgQueue.push({
|
139 | options: merge({}, defaults, MessageBox.defaults, options),
|
140 | callback: callback,
|
141 | resolve: resolve,
|
142 | reject: reject
|
143 | });
|
144 |
|
145 | showNextMsg();
|
146 | });
|
147 | } else {
|
148 | msgQueue.push({
|
149 | options: merge({}, defaults, MessageBox.defaults, options),
|
150 | callback: callback
|
151 | });
|
152 |
|
153 | showNextMsg();
|
154 | }
|
155 | };
|
156 |
|
157 | MessageBox.setDefaults = defaults => {
|
158 | MessageBox.defaults = defaults;
|
159 | };
|
160 |
|
161 | MessageBox.alert = (message, title, options) => {
|
162 | if (typeof title === 'object') {
|
163 | options = title;
|
164 | title = '';
|
165 | } else if (title === undefined) {
|
166 | title = '';
|
167 | }
|
168 | return MessageBox(merge({
|
169 | title: title,
|
170 | message: message,
|
171 | $type: 'alert',
|
172 | closeOnPressEscape: false,
|
173 | closeOnClickModal: false
|
174 | }, options));
|
175 | };
|
176 |
|
177 | MessageBox.confirm = (message, title, options) => {
|
178 | if (typeof title === 'object') {
|
179 | options = title;
|
180 | title = '';
|
181 | } else if (title === undefined) {
|
182 | title = '';
|
183 | }
|
184 | return MessageBox(merge({
|
185 | title: title,
|
186 | message: message,
|
187 | $type: 'confirm',
|
188 | showCancelButton: true
|
189 | }, options));
|
190 | };
|
191 |
|
192 | MessageBox.prompt = (message, title, options) => {
|
193 | if (typeof title === 'object') {
|
194 | options = title;
|
195 | title = '';
|
196 | } else if (title === undefined) {
|
197 | title = '';
|
198 | }
|
199 | return MessageBox(merge({
|
200 | title: title,
|
201 | message: message,
|
202 | showCancelButton: true,
|
203 | showInput: true,
|
204 | $type: 'prompt'
|
205 | }, options));
|
206 | };
|
207 |
|
208 | MessageBox.close = () => {
|
209 | instance.doClose();
|
210 | instance.visible = false;
|
211 | msgQueue = [];
|
212 | currentMsg = null;
|
213 | };
|
214 |
|
215 | export default MessageBox;
|
216 | export { MessageBox };
|