elementui notify

使用 ElementUI 的 Notify 通知组件

ElementUI 提供了 Notify 通知组件，用于在页面顶部显示全局通知消息。以下是使用方法和常见配置。

基本用法

通过 this.$notify 调用通知组件，支持传递配置对象：

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

通知类型

Notify 支持四种类型，通过 type 属性设置：

• success：成功通知
• warning：警告通知
• info：信息通知
• error：错误通知

this.$notify({
  title: '成功',
  message: '操作成功完成',
  type: 'success'
});

自定义位置

通过 position 属性可以设置通知显示的位置，默认为 top-right，可选值包括：

• top-right
• top-left
• bottom-right
• bottom-left

this.$notify({
  title: '提示',
  message: '自定义位置的通知',
  position: 'bottom-left'
});

设置持续时间

使用 duration 属性控制通知自动关闭的时间（毫秒），默认值为 4500。设置为 0 时不会自动关闭。

this.$notify({
  title: '提示',
  message: '5秒后关闭的通知',
  duration: 5000
});

自定义关闭按钮

通过 showClose 属性控制是否显示关闭按钮，默认为 true。

this.$notify({
  title: '提示',
  message: '没有关闭按钮的通知',
  showClose: false
});

使用 HTML 内容

设置 dangerouslyUseHTMLString 为 true 可以在 message 中使用 HTML 内容。

this.$notify({
  title: 'HTML 内容',
  message: '<strong>这是加粗的</strong> <i>斜体文本</i>',
  dangerouslyUseHTMLString: true
});

全局配置

可以在引入 ElementUI 时全局配置 Notify 的默认行为：

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI, {
  notify: {
    position: 'bottom-right',
    duration: 3000
  }
});

手动关闭通知

Notify 返回一个关闭函数，可以手动关闭通知：

const notifyInstance = this.$notify({
  title: '提示',
  message: '可以手动关闭的通知',
  duration: 0
});

// 3秒后手动关闭
setTimeout(() => {
  notifyInstance.close();
}, 3000);

完整配置选项

Notify 支持的完整配置选项包括：

• title：标题
• message：消息内容
• type：类型
• duration：显示时间
• position：位置
• showClose：是否显示关闭按钮
• onClose：关闭时的回调函数
• offset：偏移距离
• customClass：自定义类名

this.$notify({
  title: '完整配置',
  message: '包含所有配置选项的通知',
  type: 'warning',
  duration: 5000,
  position: 'top-left',
  showClose: true,
  onClose: function() {
    console.log('通知已关闭');
  },
  offset: 50,
  customClass: 'my-notify'
});

单独引入 Notify

如果只需要使用 Notify 组件，可以单独引入：

import { Notification } from 'element-ui';

Notification.success({
  title: '成功',
  message: '单独引入的通知'
});

以上是 ElementUI Notify 组件的详细使用方法，根据实际需求选择合适的配置即可。