@@ -165,6 +173,35 @@ We provide four types: success, warning, info and error.
...
@@ -165,6 +173,35 @@ We provide four types: success, warning, info and error.
```
```
:::
:::
### With offset
Customize Notification's offset from the top edge of the screen
::: demo Set the `offset` attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.
```html
<template>
<el-button
plain
@click="open7">
Notification with offset
</el-button>
</template>
<script>
exportdefault{
methods:{
open7(){
this.$notify.success({
title:'Success',
message:'This is a success message',
offset:100
});
}
}
}
</script>
```
### Global method
### Global method
Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
...
@@ -187,6 +224,7 @@ In this case you should call `Notification(options)`. We have also registered me
...
@@ -187,6 +224,7 @@ In this case you should call `Notification(options)`. We have also registered me
| type | notification type | string | success/warning/info/error | — |
| type | notification type | string | success/warning/info/error | — |
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
| onClose | callback function when closed | function | — | — |
| onClose | callback function when closed | function | — | — |
| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
### Methods
### Methods
`Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it.
`Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it.