030_Message消息提示
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 router2.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消息提示的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 029_Loading加载
- 下一篇: 031_MessageBox弹框