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?

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的032_Notification通知的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。