From 384c56381ce109b6fe1ab081fac4c9a7c2c392bf Mon Sep 17 00:00:00 2001 From: Zhi Cun Date: Tue, 28 May 2019 18:45:39 +0800 Subject: [PATCH] Message: display in stack mode (#15639) --- examples/docs/en-US/message.md | 3 ++- examples/docs/es/message.md | 1 + examples/docs/fr-FR/message.md | 1 + examples/docs/zh-CN/message.md | 1 + packages/message/src/main.js | 28 ++++++++++++++++++++------- packages/message/src/main.vue | 7 +++++++ packages/theme-chalk/src/message.scss | 2 +- 7 files changed, 34 insertions(+), 9 deletions(-) diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md index 65c1af7b1..189fa2323 100644 --- a/examples/docs/en-US/message.md +++ b/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. diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md index 8c387e977..9e3043097 100644 --- a/examples/docs/es/message.md +++ b/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`. diff --git a/examples/docs/fr-FR/message.md b/examples/docs/fr-FR/message.md index 97540c565..08e4c79d2 100644 --- a/examples/docs/fr-FR/message.md +++ b/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 diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md index f64bf8606..c6c50b8e3 100644 --- a/examples/docs/zh-CN/message.md +++ b/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` 方法。 diff --git a/packages/message/src/main.js b/packages/message/src/main.js index bfc228b7a..1f228a145 100644 --- a/packages/message/src/main.js +++ b/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,8 +56,11 @@ 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]); } @@ -61,6 +68,13 @@ Message.close = function(id, userOnClose) { 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() { diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue index a478a7e75..dc572e0f0 100644 --- a/packages/message/src/main.vue +++ b/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` + }; } }, diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss index f413b74cc..58de08408 100644 --- a/packages/theme-chalk/src/message.scss +++ b/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;