elementui notify

elementui notify 使用方法

Element UI 的 Notify 通知组件用于在页面顶部显示全局通知消息，常用于操作反馈或系统提示。以下是具体使用方法：

安装与引入 在项目中安装 Element UI 后，通过以下方式引入 Notify：

import { Notification } from 'element-ui';

基础用法 直接调用 Notification 方法即可显示通知：

Notification({
  title: '提示',
  message: '这是一条通知消息',
  type: 'success'
});

参数配置 支持多种配置选项：

Notification({
  title: '标题',
  message: '可自定义内容',
  type: 'warning', // success/warning/info/error
  duration: 4500, // 显示时长(毫秒)
  offset: 100, // 距离顶部的偏移量
  position: 'top-right' // 显示位置(top-right/top-left/bottom-right/bottom-left)
});

方法调用 提供四种快捷方法：

Notification.success('成功消息');
Notification.warning('警告消息');
Notification.error('错误消息');
Notification.info('普通消息');

关闭通知 手动关闭通知：

const notify = Notification({
  message: '可手动关闭',
  duration: 0 // 设置为0不会自动关闭
});

// 调用close方法关闭
notify.close();

注意事项

1. 在 Vue 组件中可通过 this.$notify 访问
2. 多个通知会默认自动堆叠排列
3. 自定义位置需确保 CSS 布局允许
4. 复杂内容可使用 HTML 片段作为 message

样式定制

可通过全局 CSS 覆盖修改通知框样式：

.el-notification {
  width: 400px !important;
}
.el-notification__title {
  color: #ff0000;
}