Message: display in stack mode

Author: island205

packages/message/src/main.js

@@ -32,6 +32,11 @@ const Message = function(options) {
   }
   instance.vm = instance.$mount();
   document.body.appendChild(instance.vm.$el);
+  let verticalOffset = options.offset || 20;
+  instances.forEach(item => {
+    verticalOffset += item.$el.offsetHeight + 16;
+  });
+  instance.verticalOffset = verticalOffset;
   instance.vm.visible = true;
   instance.dom = instance.vm.$el;
   instance.dom.style.zIndex = PopupManager.nextZIndex();
@@ -52,15 +57,25 @@ const Message = function(options) {
 });
 
 Message.close = function(id, userOnClose) {
-  for (let i = 0, len = instances.length; i < len; i++) {
+  let len = instances.length;
+  let index = -1;
+  for (let i = 0; i < len; i++) {
     if (id === instances[i].id) {
+      index = i;
       if (typeof userOnClose === 'function') {
         userOnClose(instances[i]);
       }
       instances.splice(i, 1);
       break;
     }
   }
+  if (len <= 1 || index === -1) return;
+  const removedHeight = instances[index].dom.offsetHeight;
+  for (let i = index; i < len - 1 ; i++) {
+    let dom = instances[i].dom;
+    dom.style['top'] =
+      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';
+  }
 };
 
 Message.closeAll = function() {

packages/message/src/main.vue

@@ -8,6 +8,7 @@
         showClose ? 'is-closable' : '',
         customClass
       ]"
+      :style="positionStyle"
       v-show="visible"
       @mouseenter="clearTimer"
       @mouseleave="startTimer"
@@ -43,6 +44,7 @@
         onClose: null,
         showClose: false,
         closed: false,
+        verticalOffset: 20,
         timer: null,
         dangerouslyUseHTMLString: false,
         center: false
@@ -54,6 +56,11 @@
         return this.type && !this.iconClass
           ? `el-message__icon el-icon-${ typeMap[this.type] }`
           : '';
+      },
+      positionStyle() {
+        return {
+          'top': `${ this.verticalOffset }px`
+        };
       }
     },
 

packages/theme-chalk/src/message.scss

@@ -13,7 +13,7 @@
   top: 20px;
   transform: translateX(-50%);
   background-color: $--message-background-color;
-  transition: opacity 0.3s, transform .4s;
+  transition: opacity 0.3s, transform .4s, top 0.4s;
   overflow: hidden;
   padding: $--message-padding;
   display: flex;