1. Message消息提示

1.1. Message消息提示常用于主動操作后的反饋提示。與Notification的區別是后者更多用于系統級通知的被動提醒。

1.2. Options

參數	說明	類型	可選值	默認值
message	消息文字	string / VNode	無	無
type	主題	string	success/warning/info/error	info
iconClass	自定義圖標的類名, 會覆蓋type	string	無	無
dangerouslyUseHTMLString ?	是否將message屬性作為HTML片段處理	boolean	無	false
customClass	自定義類名	string	無	無
duration	顯示時間, 毫秒。設為0則不會自動關閉	number	無	3000
showClose	是否顯示關閉按鈕	boolean	無	false
center	文字是否居中	boolean	無	false
onClose	關閉時的回調函數, 參數為被關閉的message實例	function	無	無
offset	Message距離窗口頂部的偏移量	number	無	20

1.3. 方法

方法名	說明
close	關閉當前的Message

1.4. message屬性雖然支持傳入HTML片段, 但是在網站上動態渲染任意HTML是非常危險的, 因為容易導致XSS攻擊。因此在dangerouslyUseHTMLString打開的情況下, 請確保message的內容是可信的, 永遠不要將用戶提交的內容賦值給message屬性。

1.5. 單獨引入Message

import { Message } from 'element-ui';Message(options); Message.success(options);

1.6. 可以調用Message.closeAll()手動關閉所有實例。

1.7. 如果完整引入了Element, 那么Vue.prototype上會有一個全局方法$message, 它的調用方式為: this.$message(options), 同樣會返回一個Message實例。

2. Message消息提示例子

2.1. 使用腳手架新建一個名為element-ui-message的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Message from '../components/Message.vue' import TypeMessage from '../components/TypeMessage.vue' import CloseMessage from '../components/CloseMessage.vue' import CenterMessage from '../components/CenterMessage.vue' import HtmlMessage from '../components/HtmlMessage.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Message' },{ path: '/Message', component: Message },{ path: '/TypeMessage', component: TypeMessage },{ path: '/CloseMessage', component: CloseMessage },{ path: '/CenterMessage', component: CenterMessage },{ path: '/HtmlMessage', component: HtmlMessage } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Message.vue

<template><div><h1>基礎用法-從頂部出現, 3秒后自動消失</h1><h4>Element注冊了一個$message方法用于調用, Message可以接收一個字符串或一個VNode作為參數, 它會被顯示為正文內容。</h4><el-button :plain="true" @click="open">打開消息提示</el-button><el-button :plain="true" @click="openVn">VNode</el-button></div> </template><script> export default {methods: {open () {this.$message('這是一條消息提示')},openVn () {const h = this.$createElementthis.$message({message: h('p', null, [h('span', null, '內容可以是 '),h('i', { style: 'color: teal' }, 'VNode')])})}} } </script>

2.4. 在components下創建TypeMessage.vue

<template><div><h1>不同狀態-用來顯示「成功、警告、消息、錯誤」類的操作反饋</h1><h4>當需要自定義更多屬性時, Message也可以接收一個對象為參數。比如: 設置type字段可以定義不同的狀態, 默認為info。此時正文內容以message的值傳入。同時, 我們也為Message的各種type注冊了方法, 可以在不傳入type字段的情況直接按類型調用。</h4><el-row><el-button :plain="true" @click="open11">成功1</el-button><el-button :plain="true" @click="open12">警告1</el-button><el-button :plain="true" @click="open13">消息1</el-button><el-button :plain="true" @click="open14">錯誤1</el-button></el-row><el-row style="margin-top: 20px;"><el-button :plain="true" @click="open21">成功2</el-button><el-button :plain="true" @click="open22">警告2</el-button><el-button :plain="true" @click="open23">消息2</el-button><el-button :plain="true" @click="open24">錯誤2</el-button></el-row></div> </template><script> export default {methods: {open11 () {this.$message({message: '恭喜你, 這是一條成功消息1',type: 'success'})},open12 () {this.$message({message: '警告哦, 這是一條警告消息1',type: 'warning'})},open13 () {this.$message('這是一條消息提示1')},open14 () {this.$message({message: '錯了哦, 這是一條錯誤消息1',type: 'error'})},open21 () {this.$message.success('恭喜你, 這是一條成功消息2')},open22 () {this.$message.warning('警告哦, 這是一條警告消息2')},open23 () {this.$message.info('這是一條消息提示2')},open24 () {this.$message.error('錯了哦, 這是一條錯誤消息2')}} } </script>

2.5. 在components下創建CloseMessage.vue

<template><div><h1>可關閉-可以添加關閉按鈕</h1><h4>默認的Message是不可以被人工關閉的, 如果需要可手動關閉的Message, 可以使用showClose字段。此外, 和Notification一樣, Message擁有可控的duration, 設置0為不會被自動關閉, 默認為3000毫秒。</h4><el-button :plain="true" @click="open1">消息</el-button><el-button :plain="true" @click="open2">成功</el-button><el-button :plain="true" @click="open3">警告</el-button><el-button :plain="true" @click="open4">錯誤</el-button></div> </template><script> export default {methods: {open1 () {this.$message({duration: 0,showClose: true,message: '這是一條消息提示',onClose: function (ins) {console.log(ins)}})},open2 () {this.$message({showClose: true,message: '恭喜你，這是一條成功消息',type: 'success'})},open3 () {this.$message({showClose: true,message: '警告哦，這是一條警告消息',type: 'warning'})},open4 () {this.$message({showClose: true,message: '錯了哦，這是一條錯誤消息',type: 'error'})}} } </script>

2.6. 在components下創建CenterMessage.vue

<template><div><h1>文字居中</h1><h4>使用center屬性讓文字水平居中。iconClass自定義圖標的類名, 會覆蓋type。offset設置Message距離窗口頂部的偏移量。</h4><el-button :plain="true" @click="openCenter">文字居中</el-button></div> </template><script> export default {methods: {openCenter () {this.$message({message: '居中的文字',center: true,iconClass: 'el-icon-message',offset: 120})}} } </script>

2.7. 在components下創建HtmlMessage.vue

<template><div><h1>使用html片段</h1><h4>將dangerouslyUseHTMLString屬性設置為true, message就會被當作html片段處理。</h4><el-button :plain="true" @click="openHtml">使用html片段</el-button></div> </template><script> export default {methods: {openHtml () {this.$message({dangerouslyUseHTMLString: true,message: '<strong>這是 <i>HTML</i> 片段</strong>'})}} } </script>

2.8. 運行項目, 訪問http://localhost:8080/#/Message

2.9. 運行項目, 訪問http://localhost:8080/#/TypeMessage?

2.10. 運行項目, 訪問http://localhost:8080/#/CloseMessage

?2.11. 運行項目, 訪問http://localhost:8080/#/CenterMessage??

2.12. 運行項目, 訪問http://localhost:8080/#/HtmlMessage?

總結

以上是生活随笔為你收集整理的030_Message消息提示的全部內容，希望文章能夠幫你解決所遇到的問題。

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