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: 重寫(xiě)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中引用assets中圖片的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue中引用assets中圖片的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
分享一個(gè)vue項(xiàng)目“腳手架”項(xiàng)目的實(shí)現(xiàn)步驟
這篇文章主要介紹了分享一個(gè)vue項(xiàng)目“腳手架”項(xiàng)目的實(shí)現(xiàn)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過(guò)聲明接收、接收數(shù)據(jù)的同時(shí)進(jìn)行?類(lèi)型限制、接收數(shù)據(jù)的同時(shí)對(duì)?數(shù)據(jù)類(lèi)型、必要性、默認(rèn)值?進(jìn)行限制相關(guān)內(nèi)容展開(kāi)更多詳細(xì)的相關(guān)資料，需要的小伙伴可以參考一下2022-03-03
vuex實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
本文給大家分享的是個(gè)人在使用vue.js制作的文章和評(píng)論的分頁(yè)組件，并使用webpack打包起來(lái)，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
ant-design-vue前端UI庫(kù),如何解決Table中時(shí)間格式化問(wèn)題
這篇文章主要介紹了ant-design-vue前端UI庫(kù),如何解決Table中時(shí)間格式化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue2.0監(jiān)聽(tīng)屬性的使用心得及搭配計(jì)算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽(tīng)屬性的使用心得及搭配計(jì)算屬性的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題
我們知道,浮點(diǎn)類(lèi)型的數(shù)據(jù),在計(jì)算機(jī)中是以二進(jìn)制的方式存儲(chǔ)的,但是表示的數(shù)據(jù)也有個(gè)上限和下限,當(dāng)超過(guò)限制?,在計(jì)算機(jī)上顯示只能取最接近的限值,?數(shù)字解析精度丟失說(shuō)的就是這個(gè)現(xiàn)象,所以本文給大家介紹了Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題的解決,需要的朋友可以參考下2024-02-02
Vue+Websocket簡(jiǎn)單實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了Vue+Websocket簡(jiǎn)單實(shí)現(xiàn)聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue.js評(píng)論發(fā)布信息可插入QQ表情功能
這篇文章主要為大家詳細(xì)介紹了vue.js評(píng)論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08