1 | import Vue from 'vue';
|
2 | import Main from './main.vue';
|
3 | import merge from 'element-ui/src/utils/merge';
|
4 | import { PopupManager } from 'element-ui/src/utils/popup';
|
5 | import { isVNode } from 'element-ui/src/utils/vdom';
|
6 | const NotificationConstructor = Vue.extend(Main);
|
7 |
|
8 | let instance;
|
9 | let instances = [];
|
10 | let seed = 1;
|
11 |
|
12 | const Notification = function(options) {
|
13 | if (Vue.prototype.$isServer) return;
|
14 | options = merge({}, options);
|
15 | const userOnClose = options.onClose;
|
16 | const id = 'notification_' + seed++;
|
17 | const position = options.position || 'top-right';
|
18 |
|
19 | options.onClose = function() {
|
20 | Notification.close(id, userOnClose);
|
21 | };
|
22 |
|
23 | instance = new NotificationConstructor({
|
24 | data: options
|
25 | });
|
26 |
|
27 | if (isVNode(options.message)) {
|
28 | instance.$slots.default = [options.message];
|
29 | options.message = 'REPLACED_BY_VNODE';
|
30 | }
|
31 | instance.id = id;
|
32 | instance.$mount();
|
33 | document.body.appendChild(instance.$el);
|
34 | instance.visible = true;
|
35 | instance.dom = instance.$el;
|
36 | instance.dom.style.zIndex = PopupManager.nextZIndex();
|
37 |
|
38 | let verticalOffset = options.offset || 0;
|
39 | instances.filter(item => item.position === position).forEach(item => {
|
40 | verticalOffset += item.$el.offsetHeight + 16;
|
41 | });
|
42 | verticalOffset += 16;
|
43 | instance.verticalOffset = verticalOffset;
|
44 | instances.push(instance);
|
45 | return instance;
|
46 | };
|
47 |
|
48 | ['success', 'warning', 'info', 'error'].forEach(type => {
|
49 | Notification[type] = options => {
|
50 | if (typeof options === 'string' || isVNode(options)) {
|
51 | options = {
|
52 | message: options
|
53 | };
|
54 | }
|
55 | options.type = type;
|
56 | return Notification(options);
|
57 | };
|
58 | });
|
59 |
|
60 | Notification.close = function(id, userOnClose) {
|
61 | let index = -1;
|
62 | const len = instances.length;
|
63 | const instance = instances.filter((instance, i) => {
|
64 | if (instance.id === id) {
|
65 | index = i;
|
66 | return true;
|
67 | }
|
68 | return false;
|
69 | })[0];
|
70 | if (!instance) return;
|
71 |
|
72 | if (typeof userOnClose === 'function') {
|
73 | userOnClose(instance);
|
74 | }
|
75 | instances.splice(index, 1);
|
76 |
|
77 | if (len <= 1) return;
|
78 | const position = instance.position;
|
79 | const removedHeight = instance.dom.offsetHeight;
|
80 | for (let i = index; i < len - 1 ; i++) {
|
81 | if (instances[i].position === position) {
|
82 | instances[i].dom.style[instance.verticalProperty] =
|
83 | parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
|
84 | }
|
85 | }
|
86 | };
|
87 |
|
88 | Notification.closeAll = function() {
|
89 | for (let i = instances.length - 1; i >= 0; i--) {
|
90 | instances[i].close();
|
91 | }
|
92 | };
|
93 |
|
94 | export default Notification;
|