1. Message消息提示

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

1.2. Options

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

1.3. 方法

方法名	說明
close	關(guān)閉當(dāng)前的Message

1.4. message屬性雖然支持傳入HTML片段, 但是在網(wǎng)站上動態(tài)渲染任意HTML是非常危險的, 因?yàn)槿菀讓?dǎo)致XSS攻擊。因此在dangerouslyUseHTMLString打開的情況下, 請確保message的內(nèi)容是可信的, 永遠(yuǎn)不要將用戶提交的內(nèi)容賦值給message屬性。

1.5. 單獨(dú)引入Message

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

1.6. 可以調(diào)用Message.closeAll()手動關(guān)閉所有實(shí)例。

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

2. Message消息提示例子

2.1. 使用腳手架新建一個名為element-ui-message的前端項(xiàng)目, 同時安裝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下創(chuàng)建Message.vue

<template><div><h1>基礎(chǔ)用法-從頂部出現(xiàn), 3秒后自動消失</h1><h4>Element注冊了一個$message方法用于調(diào)用, Message可以接收一個字符串或一個VNode作為參數(shù), 它會被顯示為正文內(nèi)容。</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, '內(nèi)容可以是 '),h('i', { style: 'color: teal' }, 'VNode')])})}} } </script>

2.4. 在components下創(chuàng)建TypeMessage.vue

<template><div><h1>不同狀態(tài)-用來顯示「成功、警告、消息、錯誤」類的操作反饋</h1><h4>當(dāng)需要自定義更多屬性時, Message也可以接收一個對象為參數(shù)。比如: 設(shè)置type字段可以定義不同的狀態(tài), 默認(rèn)為info。此時正文內(nèi)容以message的值傳入。同時, 我們也為Message的各種type注冊了方法, 可以在不傳入type字段的情況直接按類型調(diào)用。</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下創(chuàng)建CloseMessage.vue

<template><div><h1>可關(guān)閉-可以添加關(guān)閉按鈕</h1><h4>默認(rèn)的Message是不可以被人工關(guān)閉的, 如果需要可手動關(guān)閉的Message, 可以使用showClose字段。此外, 和Notification一樣, Message擁有可控的duration, 設(shè)置0為不會被自動關(guān)閉, 默認(rèn)為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下創(chuàng)建CenterMessage.vue

<template><div><h1>文字居中</h1><h4>使用center屬性讓文字水平居中。iconClass自定義圖標(biāo)的類名, 會覆蓋type。offset設(shè)置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下創(chuàng)建HtmlMessage.vue

<template><div><h1>使用html片段</h1><h4>將dangerouslyUseHTMLString屬性設(shè)置為true, message就會被當(dāng)作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. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/Message

2.9. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/TypeMessage?

2.10. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/CloseMessage

?2.11. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/CenterMessage??

2.12. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/HtmlMessage?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。