mirror of https://github.com/ElemeFE/element
Notification: add offset
parent
a8761eba34
commit
5aa4c5f00a
|
@ -45,6 +45,13 @@
|
|||
message: '这是一条错误的提示消息'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$notify({
|
||||
message: '吴尔丹',
|
||||
origin: 100
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
console.log('Notification 已关闭');
|
||||
|
@ -166,6 +173,35 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 带有偏移
|
||||
|
||||
让 Notification 偏移一些位置
|
||||
|
||||
::: demo Element Notification 组件提供设置偏移量的功能, 通过设置 `origin` 字段,可以使弹出的消息距屏幕上方偏移一段距离, 在同一时刻,所有的 Notification 实例应当只有同一个偏移量。
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open7">
|
||||
偏移的消息
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
this.$notify({
|
||||
message: '吴尔丹',
|
||||
origin: 100
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 全局方法
|
||||
|
||||
Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
|
||||
|
@ -188,6 +224,7 @@ import { Notification } from 'element-ui';
|
|||
| type | 主题样式,如果不在可选值内将被忽略 | string | success/warning/info/error | — |
|
||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
|
||||
| onClose | 关闭时的回调函数 | function | — | — |
|
||||
| origin | 偏移的距离,在同一时刻,所有的 Notification 实例应当只有同一个偏移量 | number | — | 0 |
|
||||
|
||||
### 方法
|
||||
调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 `close` 方法。
|
||||
|
|
|
@ -25,7 +25,8 @@ var Notification = function(options) {
|
|||
instance.dom = instance.vm.$el;
|
||||
instance.dom.style.zIndex = PopupManager.nextZIndex();
|
||||
|
||||
let topDist = 0;
|
||||
const origin = options.origin || 0;
|
||||
let topDist = origin;
|
||||
for (let i = 0, len = instances.length; i < len; i++) {
|
||||
topDist += instances[i].$el.offsetHeight + 16;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue