Element的Message彈窗重復(fù)彈出問題解決
更新時間：2021年09月06日 10:49:15 作者：JamisonLee
本文主要介紹了Element的Message彈窗重復(fù)彈出，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一. 使用
在 Vue 中使用 element 的 message 組件
在 Vue 文件中使用
this.$message({
message: "提示信息",
type: "success"
})
在 js 文件中使用
import ElementUI from 'element-ui';
ElementUI.Message({
message: '提示信息',
type: 'warning'
});
二. 解決消息彈窗重復(fù)顯示
// message.js
/**
* @Description: 重寫message掛載，實現(xiàn) Class 的私有屬性
* @param { String } options => 消息內(nèi)容
* @param { Boolean } single => 是否只顯示一個
*/
import { Message } from 'element-ui';
const showMessage = Symbol('showMessage');
class DonMessage {
success (options, single = false) {
this[showMessage]('success', options, single);
}
warning (options, single = false) {
this[showMessage]('warning', options, single);
}
info (options, single = false) {
this[showMessage]('info', options, single);
}
error (options, single = true) {
this[showMessage]('error', options, single);
}
[showMessage] (type, options, single) {
if (single) {
// 判斷是否已存在Message
if (document.getElementsByClassName('el-message--error').length === 0) {
Message[type](options);
}
} else {
Message[type](options);
}
}
}
// 默認(rèn)導(dǎo)出 私有 Message 組件
export default new DonMessage();
在有需要的地方引入
import DonMessage from '@/message'
js 文件中直接使用
DonMessage.warning('請登錄')
掛載到vue原型上
// main.js Vue.prototype.$message = DonMessage
// vue文件中調(diào)用
this.$message.warning("請登錄")
到此這篇關(guān)于Element的Message彈窗重復(fù)彈出問題解決的文章就介紹到這了,更多相關(guān)Element的Message彈窗重復(fù)彈出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實現(xiàn)移動端彈出鍵盤功能(防止頁面fixed布局錯亂)
這篇文章主要介紹了vue?解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題,通過實例代碼給大家分享解決方案，對vue?移動端彈出鍵盤相關(guān)知識感興趣的朋友一起看看吧2022-04-04
vscode中vue代碼提示與補全沒反應(yīng)解決(vetur問題)
這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補全沒反應(yīng)解決(vetur問題)的相關(guān)資料,文中通過圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue動態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
本篇文章將會嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來看看吧2023-08-08
vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個基于Typescript開發(fā)的針對Vue3開發(fā)的UI組件庫,由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下2023-08-08
vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
下面小編就為大家?guī)硪黄猧view給radio按鈕組件加點擊事件的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue?結(jié)合Sortablejs實現(xiàn)table行排序功能
在一個列表展示頁面上，使用了表格組件，原有組件本身不支持拖拽功能，需求要求在列表的基礎(chǔ)上支持行拖拽排序，因此引入了www.sortablejs.com插件，接下來通過本文給大家講解Vue?結(jié)合Sortablejs實現(xiàn)table行排序功能,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了詳解Vue爬坑之vuex初識 ，Vue 的狀態(tài)管理工具 Vuex可以解決大型項目中子組件之間傳遞數(shù)據(jù)，有興趣的可以了解下2017-06-06
這篇文章主要給大家介紹了關(guān)于vue3項目打包與上線的相關(guān)資料,在項目完成得差不多得時候,就可以開始打包部署了,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12