Message: display in stack mode (#15639)

pull/15761/head
Zhi Cun 2019-05-28 18:45:39 +08:00 committed by iamkun
parent 714a2a9b7b
commit 384c56381c
7 changed files with 34 additions and 9 deletions

View File

@ -20,7 +20,7 @@ Displays at the top, and disappears after 3 seconds.
open() { open() {
this.$message('This is a message.'); this.$message('This is a message.');
}, },
openVn() { openVn() {
const h = this.$createElement; const h = this.$createElement;
this.$message({ 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 | | showClose | whether to show a close button | boolean | — | false |
| center | whether to center the text | boolean | — | false | | center | whether to center the text | boolean | — | false |
| onClose | callback function when closed with the message instance as the parameter | function | — | — | | 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 ### Methods
`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it. `Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.

View File

@ -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 | | showClose | utilizado para mostrar un boton para cerrar | boolean | — | false |
| center | utilizado para centrar el texto | 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 | — | — | | 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 ### Metodos
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`. `Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.

View File

@ -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 | | showClose | Si un bouton de fermeture doit être affiché. | boolean | — | false |
| center | Si le texte doit être centré. | boolean | — | false | | center | Si le texte doit être centré. | boolean | — | false |
| onClose | Callback de fermeture avec en paramètre l'instance de Message. | function | — | — | | 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 ### Méthodes

View File

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

View File

@ -30,13 +30,17 @@ const Message = function(options) {
instance.$slots.default = [instance.message]; instance.$slots.default = [instance.message];
instance.message = null; instance.message = null;
} }
instance.vm = instance.$mount(); instance.$mount();
document.body.appendChild(instance.vm.$el); document.body.appendChild(instance.$el);
instance.vm.visible = true; let verticalOffset = options.offset || 20;
instance.dom = instance.vm.$el; instances.forEach(item => {
instance.dom.style.zIndex = PopupManager.nextZIndex(); verticalOffset += item.$el.offsetHeight + 16;
});
instance.verticalOffset = verticalOffset;
instance.visible = true;
instance.$el.style.zIndex = PopupManager.nextZIndex();
instances.push(instance); instances.push(instance);
return instance.vm; return instance;
}; };
['success', 'warning', 'info', 'error'].forEach(type => { ['success', 'warning', 'info', 'error'].forEach(type => {
@ -52,8 +56,11 @@ const Message = function(options) {
}); });
Message.close = function(id, userOnClose) { 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) { if (id === instances[i].id) {
index = i;
if (typeof userOnClose === 'function') { if (typeof userOnClose === 'function') {
userOnClose(instances[i]); userOnClose(instances[i]);
} }
@ -61,6 +68,13 @@ Message.close = function(id, userOnClose) {
break; 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() { Message.closeAll = function() {

View File

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

View File

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