032_Notification通知

1. Notification通知

1.1. Notification通知, 悬浮出现在页面角落, 显示全局的通知提醒消息。

1.2. Options

参数	说明	类型	可选值	默认值
title	标题	string	无	无
message	说明文字	string/Vue.VNode	无	无
dangerouslyUseHTMLString	是否将message属性作为HTML片段处理	boolean	无	false
type	主题样式, 如果不在可选值内将被忽略	string	success/warning/info/error	无
iconClass	自定义图标的类名。若设置了type, 则iconClass会被覆盖	string	无	无
customClass	自定义类名	string	无	无
duration	显示时间, 毫秒。设为0则不会自动关闭	number	无	4500
position	自定义弹出位置	string		top-right
showClose	是否显示关闭按钮	boolean	无	true
onClose	关闭时的回调函数	function	无	无
onClick	点击Notification时的回调函数	function	无	无
offset	偏移的距离, 在同一时刻, 所有的Notification实例应当具有一个相同的偏移量	number	无	0

1.3. 方法

方法名	说明
close	关闭当前的Notification

2. Notification通知全局方法

2.1. 如果你完整引入了Element, 它会为Vue.prototype添加如下全局方法: $notify。因此在vue instance中可以采用本页面中的方式调用Notification。

this.$notify(options)
this.$notify.info(options)
this.$notify.success(options)
this.$notify.warning(options)
this.$notify.error(options)

3. Notification通知单独引用

3.1. 单独引入Notification:

import { Notification } from 'element-ui';

Notification(options);
Notification.info(options);
Notification.success(options);
Notification.warning(options);
Notification.error(options);

3.2. 可以调用Notification.closeAll()手动关闭所有实例。

4. Notification通知例子

4.1. 使用脚手架新建一个名为element-ui-messagebox的前端项目, 同时安装Element插件。

4.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Notification from '../components/Notification.vue'
import TypeNotification from '../components/TypeNotification.vue'
import PositionNotification from '../components/PositionNotification.vue'
import OffsetNotification from '../components/OffsetNotification.vue'
import HtmlNotification from '../components/HtmlNotification.vue'
import CloseNotification from '../components/CloseNotification.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Notification' },
  { path: '/Notification', component: Notification },
  { path: '/TypeNotification', component: TypeNotification },
  { path: '/PositionNotification', component: PositionNotification },
  { path: '/OffsetNotification', component: OffsetNotification },
  { path: '/HtmlNotification', component: HtmlNotification },
  { path: '/CloseNotification', component: CloseNotification }
]

const router = new VueRouter({
  routes
})

export default router

4.3. 在components下创建Notification.vue

4.4. 在components下创建TypeNotification.vue

4.5. 在components下创建PositionNotification.vue

4.6. 在components下创建OffsetNotification.vue

4.7. 在components下创建HtmlNotification.vue

4.8. 在components下创建CloseNotification.vue

4.9. 运行项目, 访问http://localhost:8080/#/Notification

4.10. 运行项目, 访问http://localhost:8080/#/TypeNotification 

4.11. 运行项目, 访问http://localhost:8080/#/PositionNotification 

4.12. 运行项目, 访问http://localhost:8080/#/OffsetNotification

4.13. 运行项目, 访问http://localhost:8080/#/HtmlNotification 

4.14. 运行项目, 访问http://localhost:8080/#/CloseNotification