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