Notification: add offset

pull/1459/head
kingwl 2016-11-29 09:55:16 +08:00 committed by 杨奕
parent a8761eba34
commit 5aa4c5f00a
2 changed files with 39 additions and 1 deletions

View File

@ -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` 方法。

View File

@ -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;
}