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

<template><div><h1>基本用法-适用性广泛的通知栏</h1><h4>Notification组件提供通知功能, Element注册了$notify方法, 接收一个options字面量参数, 在最简单的情况下, 你可以设置title字段和message字段, 用于设置通知的标题和正文。默认情况下, 经过一段时间后Notification组件会自动关闭, 但是通过设置duration, 可以控制关闭的时间间隔, 特别的是, 如果设置为0, 则不会自动关闭。注意: duration接收一个Number, 单位为毫秒, 默认为4500。</h4><el-button plain @click="open1">可自动关闭</el-button><el-button plain @click="open2">不会自动关闭</el-button></div>
</template><script>
export default {methods: {open1 () {const h = this.$createElementthis.$notify({title: '标题名称',message: h('i', { style: 'color: teal' }, '这是提示文案')})},open2 () {this.$notify({title: '提示',message: '这是一条不会自动关闭的消息',duration: 0})}}
}
</script>

4.4. 在components下创建TypeNotification.vue

<template><div><h1>带有倾向性</h1><h4>Element为Notification组件准备了四种通知类型: success, warning, info, error。通过type字段来设置, 除此以外的值将被忽略。同时, 我们也为Notification的各种type注册了方法, 可以在不传入type字段的情况直接调用。</h4><el-button plain @click="open1">成功</el-button><el-button plain @click="open2">警告</el-button><el-button plain @click="open3">消息</el-button><el-button plain @click="open4">错误</el-button></div>
</template><script>
export default {methods: {open1 () {this.$notify({title: '成功',message: '这是一条成功的提示消息',type: 'success'})},open2 () {this.$notify({title: '警告',message: '这是一条警告的提示消息',type: 'warning'})},open3 () {this.$notify.info({title: '消息',message: '这是一条消息的提示消息'})},open4 () {this.$notify.error({title: '错误',message: '这是一条错误的提示消息'})}}
}
</script>

4.5. 在components下创建PositionNotification.vue

<template><div><h1>自定义弹出位置</h1><h4>使用position属性定义Notification的弹出位置, 支持四个选项: top-right、top-left、bottom-right、bottom-left, 默认为top-right。</h4><el-button plain @click="open1">右上角</el-button><el-button plain @click="open2">右下角</el-button><el-button plain @click="open3">左下角</el-button><el-button plain @click="open4">左上角</el-button></div>
</template><script>
export default {methods: {open1 () {this.$notify({title: '自定义位置',message: '右上角弹出的消息'})},open2 () {this.$notify({title: '自定义位置',message: '右下角弹出的消息',position: 'bottom-right'})},open3 () {this.$notify({title: '自定义位置',message: '左下角弹出的消息',position: 'bottom-left'})},open4 () {this.$notify({title: '自定义位置',message: '左上角弹出的消息',position: 'top-left'})}}
}
</script>

4.6. 在components下创建OffsetNotification.vue

<template><div><h1>带有偏移</h1><h4>Notification提供设置偏移量的功能, 通过设置offset字段, 可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻, 所有的Notification实例应当具有一个相同的偏移量。</h4><el-button plain @click="open">偏移的消息</el-button></div>
</template><script>
export default {methods: {open () {this.$notify({title: '偏移',message: '这是一条带有偏移的提示消息',offset: 100})}}
}
</script>

4.7. 在components下创建HtmlNotification.vue

<template><div><h1>使用HTML片段</h1><h4>将dangerouslyUseHTMLString属性设置为true, message就会被当作HTML片段处理。</h4><el-button plain @click="open">使用 HTML 片段</el-button></div>
</template><script>
export default {methods: {open () {this.$notify({title: 'HTML 片段',dangerouslyUseHTMLString: true,message: '<strong>这是 <i>HTML</i> 片段</strong>'})}}
}
</script>

4.8. 在components下创建CloseNotification.vue

<template><div><h1>隐藏关闭按钮</h1><h4>将showClose属性设置为false即可隐藏关闭按钮。</h4><el-button plain @click="open">隐藏关闭按钮</el-button></div>
</template><script>
export default {methods: {open () {this.$notify.success({title: 'Info',message: '这是一条没有关闭按钮的消息',showClose: false})}}
}
</script>

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

032_Notification通知相关推荐

程序主动进行电话短信报警，自定义电话、短信、钉钉报警通知
程序主动进行电话短信报警,自定义电话.短信.钉钉报警通知一. 规则说明这里我们要利用到阿里云的云监控的手段,有一个叫做事件监控的东西,可以通过自定义事件上传来进行监控报警. 流程: 程序发现错误 ...
微信支付回调重复通知，正确的响应
好多人遇到这个问题,微信异步请求notify_url,我们接收到通知了,并且给微信返回下面的xml了,但是微信还是不停的给我们发通知.处理完业务后,新增如下代码: 微信文档:https://pay.w ...
spring 基于XML的申明式AspectJ通知的执行顺序
spring 基于XML的申明式AspectJ通知的执行顺序关于各种通知的执行顺序,结论:与配置文件中的申明顺序有关 1. XML文件配置说明图片来源:<Java EE企业级应用开发教程&g ...
[UWP]实现一个轻量级的应用内消息通知控件
[UWP]实现一个轻量级的应用内消息通知控件原文:[UWP]实现一个轻量级的应用内消息通知控件在UWP应用开发中,我们常常有向用户发送一些提示性消息的需求.这种时候我们一般会选择MessageDi ...
垃圾回收器的基本原理是什么？垃圾回收器可以马上回收内存吗？有什么办法主动通知虚拟机进行垃圾回收？...
一.垃圾回收器的基本原理是什么?垃圾回收器可以马上回收内存吗?有什么办法主动通知虚拟机进行垃圾回收? 1.对于GC来说,当程序员创建对象时,GC就开始监控这个对象的地址.大小以及使用情况. 通常, ...
Android监听左右滑删除通知,Android 滑动监听RecyclerView线性流+左右划删除+上下移动...
废话不多说了,直接给大家贴代码了.具体代码如下所示: xmlns:tools="http://schemas.android.com/tools" android:layout_w ...
龙岩学院计算机二级报名时间,福建龙岩学院2015年12月计算机等级考试报名通知...
福建龙岩学院2015年12月计算机等级考试报名通知各学院: 根据上级有关文件通知,2015年12月福建省高校学生计算机应用水平等级考试开始报名,现将有关事项通知如下: 一.考试内容: 本次一.二考试 ...
武汉大学计算机学院放假时间,计算机学院关于2019年学生放暑假的通知
各学生班: 根据校历,2019年7月21日至8月31日为学校放暑假时间.为加强我院学生暑假期间的教育及管理工作,现将有关事项通知如下: 一.时间安排在校普通本科生和研究生于7月21日(星期日)开始放 ...
consul服务下线通知_Consul微服务的配置中心体验篇-阿里云开发者社区
Spring Cloud Consul 项目是针对Consul的服务治理实现.Consul是一个分布式高可用的系统,具有分布式.高可用.高扩展性 Consul Consul 是 HashiCorp 公 ...

032_Notification通知

032_Notification通知相关推荐

最新文章

热门文章