4a52796a2e0c8cdcc0f8be957153794ad7c52b8ae302bd8940aad180d21eecefb13739fc3d15131b617235585914e0ea56000e946ebd27b04d847094f2949b 2.5 KB

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