Message: display in stack mode (#15639)

Author: island205

examples/docs/en-US/message.md

@@ -20,7 +20,7 @@ Displays at the top, and disappears after 3 seconds.
       open() {
         this.$message('This is a message.');
       },
-      
+
       openVn() {
         const h = this.$createElement;
         this.$message({
@@ -210,6 +210,7 @@ In this case you should call `Message(options)`. We have also registered methods
 | showClose | whether to show a close button | boolean | — | false |
 | center | whether to center the text | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |
+| offset | set the distance to the top of viewport | number | — | 20 |
 
 ### Methods
 `Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.

examples/docs/es/message.md

@@ -210,6 +210,7 @@ En este caso deberia llamar al metodo `Message(options)`. Tambien se han registr
 | showClose                | utilizado para mostrar un boton para cerrar | boolean        | —                          | false       |
 | center                   | utilizado para centrar el texto          | boolean        | —                          | false       |
 | onClose                  | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function       | —                          | —           |
+| offset | set the distance to the top of viewport | number | — | 20 |
 
 ### Metodos
 `Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.

examples/docs/fr-FR/message.md

@@ -213,6 +213,7 @@ Dans ce cas il faudra appeler `Message(options)`. Les méthodes des différents
 | showClose | Si un bouton de fermeture doit être affiché. | boolean | — | false |
 | center | Si le texte doit être centré. | boolean | — | false |
 | onClose | Callback de fermeture avec en paramètre l'instance de Message. | function | — | — |
+| offset | set the distance to the top of viewport | number | — | 20 |
 
 ### Méthodes
 

examples/docs/zh-CN/message.md

@@ -210,6 +210,7 @@ import { Message } from 'element-ui';
 | showClose | 是否显示关闭按钮 | boolean | — | false |
 | center | 文字是否居中 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
+| offset | Message 距离窗口顶部的偏移量 | number | — | 20 |
 
 ### 方法
 调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。

packages/message/src/main.js

@@ -30,13 +30,17 @@ const Message = function(options) {
     instance.$slots.default = [instance.message];
     instance.message = null;
   }
-  instance.vm = instance.$mount();
-  document.body.appendChild(instance.vm.$el);
-  instance.vm.visible = true;
-  instance.dom = instance.vm.$el;
-  instance.dom.style.zIndex = PopupManager.nextZIndex();
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+  let verticalOffset = options.offset || 20;
+  instances.forEach(item => {
+    verticalOffset += item.$el.offsetHeight + 16;
+  });
+  instance.verticalOffset = verticalOffset;
+  instance.visible = true;
+  instance.$el.style.zIndex = PopupManager.nextZIndex();
   instances.push(instance);
-  return instance.vm;
+  return instance;
 };
 
 ['success', 'warning', 'info', 'error'].forEach(type => {
@@ -52,15 +56,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 || index > instances.length - 1) return;
+  const removedHeight = instances[index].$el.offsetHeight;
+  for (let i = index; i < len - 1 ; i++) {
+    let dom = instances[i].$el;
+    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;