mirror of https://github.com/ElemeFE/element
Notification: add offset
parent
a8761eba34
commit
5aa4c5f00a
|
@ -46,6 +46,13 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
open7() {
|
||||||
|
this.$notify({
|
||||||
|
message: '吴尔丹',
|
||||||
|
origin: 100
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
onClose() {
|
onClose() {
|
||||||
console.log('Notification 已关闭');
|
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。
|
Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
|
||||||
|
@ -188,6 +224,7 @@ import { Notification } from 'element-ui';
|
||||||
| type | 主题样式,如果不在可选值内将被忽略 | string | success/warning/info/error | — |
|
| type | 主题样式,如果不在可选值内将被忽略 | string | success/warning/info/error | — |
|
||||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
|
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
|
||||||
| onClose | 关闭时的回调函数 | function | — | — |
|
| onClose | 关闭时的回调函数 | function | — | — |
|
||||||
|
| origin | 偏移的距离,在同一时刻,所有的 Notification 实例应当只有同一个偏移量 | number | — | 0 |
|
||||||
|
|
||||||
### 方法
|
### 方法
|
||||||
调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 `close` 方法。
|
调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 `close` 方法。
|
||||||
|
|
|
@ -25,7 +25,8 @@ var Notification = function(options) {
|
||||||
instance.dom = instance.vm.$el;
|
instance.dom = instance.vm.$el;
|
||||||
instance.dom.style.zIndex = PopupManager.nextZIndex();
|
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++) {
|
for (let i = 0, len = instances.length; i < len; i++) {
|
||||||
topDist += instances[i].$el.offsetHeight + 16;
|
topDist += instances[i].$el.offsetHeight + 16;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue