mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-27 03:01:14 +08:00
515 lines
11 KiB
Markdown
515 lines
11 KiB
Markdown
## Notification
|
|
|
|
Displays a global notification message at a corner of the page.
|
|
|
|
### Basic usage
|
|
|
|
:::demo Element Plus has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
|
|
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open1">
|
|
Closes automatically
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open2">
|
|
Won't close automatically
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
import { h } from 'vue';
|
|
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
this.$notify({
|
|
title: 'Title',
|
|
message: h('i', { style: 'color: teal' }, 'This is a reminder')
|
|
});
|
|
},
|
|
|
|
open2() {
|
|
this.$notify({
|
|
title: 'Prompt',
|
|
message: 'This is a message that does not automatically close',
|
|
duration: 0
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, h } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElNotification({
|
|
title: 'Title',
|
|
message: h('i', { style: 'color: teal' }, 'This is a reminder')
|
|
});
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElNotification({
|
|
title: 'Prompt',
|
|
message: 'This is a message that does not automatically close',
|
|
duration: 0
|
|
});
|
|
};
|
|
return {
|
|
open1,
|
|
open2,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### With types
|
|
|
|
We provide four types: success, warning, info and error.
|
|
|
|
:::demo Element Plus provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open1">
|
|
Success
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open2">
|
|
Warning
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open3">
|
|
Info
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open4">
|
|
Error
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
this.$notify({
|
|
title: 'Success',
|
|
message: 'This is a success message',
|
|
type: 'success'
|
|
});
|
|
},
|
|
|
|
open2() {
|
|
this.$notify({
|
|
title: 'Warning',
|
|
message: 'This is a warning message',
|
|
type: 'warning'
|
|
});
|
|
},
|
|
|
|
open3() {
|
|
this.$notify.info({
|
|
title: 'Info',
|
|
message: 'This is an info message'
|
|
});
|
|
},
|
|
|
|
open4() {
|
|
this.$notify.error({
|
|
title: 'Error',
|
|
message: 'This is an error message'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElNotification({
|
|
title: 'Success',
|
|
message: 'This is a success message',
|
|
type: 'success',
|
|
});
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElNotification({
|
|
title: 'Warning',
|
|
message: 'This is a warning message',
|
|
type: 'warning',
|
|
});
|
|
};
|
|
|
|
const open3 = () => {
|
|
ElNotification({
|
|
title: 'Info',
|
|
message: 'This is an info message',
|
|
});
|
|
};
|
|
|
|
const open4 = () => {
|
|
ElNotification({
|
|
title: 'Error',
|
|
message: 'This is an error message',
|
|
});
|
|
};
|
|
return {
|
|
open1,
|
|
open2,
|
|
open3,
|
|
open4,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Custom position
|
|
|
|
Notification can emerge from any corner you like.
|
|
|
|
:::demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open1">
|
|
Top Right
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open2">
|
|
Bottom Right
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open3">
|
|
Bottom Left
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
@click="open4">
|
|
Top Left
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open1() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the top right corner'
|
|
});
|
|
},
|
|
|
|
open2() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the bottom right corner',
|
|
position: 'bottom-right'
|
|
});
|
|
},
|
|
|
|
open3() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the bottom left corner',
|
|
position: 'bottom-left'
|
|
});
|
|
},
|
|
|
|
open4() {
|
|
this.$notify({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the top left corner',
|
|
position: 'top-left'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open1 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the top right corner',
|
|
});
|
|
};
|
|
|
|
const open2 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the bottom right corner',
|
|
position: 'bottom-right',
|
|
});
|
|
};
|
|
|
|
const open3 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the bottom left corner',
|
|
position: 'bottom-left',
|
|
});
|
|
};
|
|
|
|
const open4 = () => {
|
|
ElNotification({
|
|
title: 'Custom Position',
|
|
message: 'I\'m at the top left corner',
|
|
position: 'top-left',
|
|
});
|
|
};
|
|
return {
|
|
open1,
|
|
open2,
|
|
open3,
|
|
open4,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### With offset
|
|
|
|
Customize Notification's offset from the edge of the screen.
|
|
|
|
:::demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open">
|
|
Notification with offset
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open() {
|
|
this.$notify.success({
|
|
title: 'Success',
|
|
message: 'This is a success message',
|
|
offset: 100
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open = () => {
|
|
ElNotification.success({
|
|
title: 'Success',
|
|
message: 'This is a success message',
|
|
offset: 100,
|
|
});
|
|
};
|
|
|
|
return {
|
|
open,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Use HTML string
|
|
`message` supports HTML string.
|
|
|
|
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open">
|
|
Use HTML String
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open() {
|
|
this.$notify({
|
|
title: 'HTML String',
|
|
dangerouslyUseHTMLString: true,
|
|
message: '<strong>This is <i>HTML</i> string</strong>'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open = () => {
|
|
ElNotification({
|
|
title: 'HTML String',
|
|
dangerouslyUseHTMLString: true,
|
|
message: '<strong>This is <i>HTML</i> string</strong>',
|
|
});
|
|
};
|
|
|
|
return {
|
|
open,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
:::warning
|
|
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
|
|
:::
|
|
|
|
### Hide close button
|
|
|
|
It is possible to hide the close button
|
|
|
|
:::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
|
|
```html
|
|
<template>
|
|
<el-button
|
|
plain
|
|
@click="open">
|
|
Hide close button
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
open() {
|
|
this.$notify.success({
|
|
title: 'Info',
|
|
message: 'This is a message without close button',
|
|
showClose: false
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { ElNotification } from 'element-plus';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
|
|
const open = () => {
|
|
ElNotification.success({
|
|
title: 'Info',
|
|
message: 'This is a message without close button',
|
|
showClose: false,
|
|
});
|
|
};
|
|
|
|
return {
|
|
open,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Global method
|
|
|
|
Element Plus has added a global method `$notify` for `app.config.globalProperties`. So in a vue instance you can call `Notification` like what we did in this page.
|
|
|
|
### Local import
|
|
|
|
```javascript
|
|
import { ElNotification } from 'element-plus';
|
|
```
|
|
|
|
In this case you should call `ElNotification(options)`. We have also registered methods for different types, e.g. `ElNotification.success(options)`. You can call `ElNotification.closeAll()` to manually close all the instances.
|
|
|
|
### Options
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|
| title | title | string | — | — |
|
|
| message | description text | string/Vue.VNode | — | — |
|
|
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
|
|
| type | notification type | string | success/warning/info/error | — |
|
|
| iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
|
|
| customClass | custom class name for Notification | string | — | — |
|
|
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
|
|
| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right |
|
|
| showClose | whether to show a close button | boolean | — | true |
|
|
| onClose | callback function when closed | function | — | — |
|
|
| onClick | callback function when notification clicked | 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
|
|
`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it.
|
|
| Method | Description |
|
|
| ---- | ---- |
|
|
| close | close the Notification |
|