mirror of https://github.com/ElemeFE/element
Message: display in stack mode (#15639)
parent
714a2a9b7b
commit
384c56381c
|
@ -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.
|
||||||
|
|
|
@ -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`.
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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` 方法。
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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`
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue