Element的Message彈窗重復彈出問題解決
更新時間：2021年09月06日 10:49:15 作者：JamisonLee
本文主要介紹了Element的Message彈窗重復彈出，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一. 使用
在 Vue 中使用 element 的 message 組件
在 Vue 文件中使用
this.$message({
message: "提示信息",
type: "success"
})
在 js 文件中使用
import ElementUI from 'element-ui';
ElementUI.Message({
message: '提示信息',
type: 'warning'
});
二. 解決消息彈窗重復顯示
// message.js
/**
* @Description: 重寫message掛載，實現 Class 的私有屬性
* @param { String } options => 消息內容
* @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);
}
}
}
// 默認導出 私有 Message 組件
export default new DonMessage();
在有需要的地方引入
import DonMessage from '@/message'
js 文件中直接使用
DonMessage.warning('請登錄')
掛載到vue原型上
// main.js Vue.prototype.$message = DonMessage
// vue文件中調用
this.$message.warning("請登錄")
到此這篇關于Element的Message彈窗重復彈出問題解決的文章就介紹到這了,更多相關Element的Message彈窗重復彈出內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue中引用assets中圖片的實現方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了分享一個vue項目“腳手架”項目的實現步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過聲明接收、接收數據的同時進行?類型限制、接收數據的同時對?數據類型、必要性、默認值?進行限制相關內容展開更多詳細的相關資料，需要的小伙伴可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了vuex實現購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
本文給大家分享的是個人在使用vue.js制作的文章和評論的分頁組件，并使用webpack打包起來，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
ant-design-vue前端UI庫,如何解決Table中時間格式化問題
這篇文章主要介紹了ant-design-vue前端UI庫,如何解決Table中時間格式化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue2.0監(jiān)聽屬性的使用心得及搭配計算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽屬性的使用心得及搭配計算屬性的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
我們知道,浮點類型的數據,在計算機中是以二進制的方式存儲的,但是表示的數據也有個上限和下限,當超過限制?,在計算機上顯示只能取最接近的限值,?數字解析精度丟失說的就是這個現象,所以本文給大家介紹了Vue項目中解決數字精度丟失問題的解決,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了Vue+Websocket簡單實現聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了vue.js評論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08