main.js 2.1 KB

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