vue中el-message的封裝使用
前言
最近對項目進行改造，發(fā)現(xiàn)在el-message使用中，如果遇到服務(wù)器掛了或者在重啟等其他情況，頁面message會彈出一大堆報錯信息，看起來很不美觀，所以對el-message進行重寫改造，這里記錄下改造中遇到的問題和實現(xiàn)，希望能對你有點幫助。
實現(xiàn)方法
實現(xiàn)方法有很多種，可以根據(jù)你實際項目情況決定使用哪一種。
方法一
直接css里面給這個樣式，簡單省事，但是這樣子有一個問題所有的message都重疊在一起，淺入淺出的動畫效果不好，不是很推薦。
.el-message {
? top: 20px !important;
}
方法二
直接使用el-message的closeAll方法，彈消息之前關(guān)閉所有的消息，也很簡單，但是這樣會有一個明顯的抖動，所以也不是很推薦(不介意的話也可以這樣寫)。
? this.$message.closeAll();
? this.$message.error("錯誤提示3");
方法三(有殘缺的方法，可以帶著問題看方法4)
對message進行改造，重寫message方法，新建一個message.js,定義一個class類,給這個class賦予success,error,info,warning4個方法，根據(jù)el-message的使用方法，分為：this.$message.success('測試成功消息') 和this.$message({type:'success',message:'測試成功消息'})這兩種情況，所以要根據(jù)傳入的值是字符串還是對象做一下判斷。
import { Message } from "element-ui";
class ZMessage {
? constructor() {
? ? ["success", "error", "info", "warning"].forEach((type) => {
? ? ? this[type] = function (options) {
? ? ? ? if (isObject(options)) {
? ? ? ? ? const { type='info', ...rest } = options;
? ? ? ? ? Message({
? ? ? ? ? ? type,
? ? ? ? ? ? ...rest,
? ? ? ? ? });
? ? ? ? ? return;
? ? ? ? }
? ? ? ? Message({
? ? ? ? ? type: type,
? ? ? ? ? message: options,
? ? ? ? });
? ? ? };
? ? });
? }
}
//判斷傳入的是否是Object
function isObject(content) {
? return (
? ? Object.prototype.toString.call(content) === "[object Object]" &&
? ? !!content.message
? );
}
export default new ZMessage;然后在main.js里面引入，覆蓋掉el-message的方法
import ZMessage from "@/utils/message"; Vue.prototype.$message = ZMessage;
這樣message重寫第一步就完成了，第二步需要判斷當前message的數(shù)量，如果小于1，就彈消息，仔細觀察message，我們可以通過document.getElementsByClassName("el-message").length來獲取當前彈框的數(shù)量，如果大于等于1就不再彈框，如果小于1就彈框。
class ZMessage {
constructor() {
["success", "error", "info", "warning"].forEach((type) => {
this[type] = function (options) {
//這里加一個判斷
if (document.getElementsByClassName("el-message").length === 0) {
if (isConfig(options)) {
const { type = "info", ...rest } = options;
Message({
type,
...rest,
});
return;
}
Message({
type: type,
message: options,
});
}
};
});
}
}這樣彈消息即使多次觸發(fā)，也只會彈一個消息出來，正當我以為已經(jīng)完事了，卻發(fā)現(xiàn)還有新的問題：
- 問題1：this.$message({type:'error',message:'測試消息'}) 報錯了
- 問題2：彈的消息不會更新，必須要等上一條消息消失后，才會出現(xiàn)新的
方法四
對于方法三存在的兩個問題，所以我們需要對方法三進行改造，還是那個文件message.js，這里不用class了，因為對外export的方法是new ZMessage()，message的值無法直接傳遞過來，暫時還沒有想好咋傳過來，所以就不用class了，所以對ZMessage進行下改造
const ZMessage = function (options) {
if (isObject(options)) {
const { type = "info", ...rest } = options;
showMessage({
type,
...rest,
})
return;
}
showMessage({
type: options.type || "info",
message: options,
})
};
["success", "error", "info", "warning"].forEach((type) => {
ZMessage[type] = function (options) {
if (isObject(options)) {
ZMessage({
type: type,
...options,
});
return;
}
ZMessage({
type,
message: options,
});
};
});
function isObject(content) {
return (
Object.prototype.toString.call(content) === "[object Object]" &&
!!content.message
);
}
function showMessage(options) {
Message({
...options
});
}
export default ZMessage;這樣第一個問題，this.$message({type:'error',message:'測試消息'})就不會報錯了，接下來解決第二個問題，值不會更新的問題，可以定義一個msgInstance變量，如果有新的值來了，就關(guān)閉上一個消息
var msgInstance = null;
const ZMessage = function (options) {
if (msgInstance) {
//更新彈框
msgInstance.close();
}
if (isObject(options)) {
const { type = "info", ...rest } = options;
showMessage({
type,
...rest,
})
return;
}
showMessage({
type: options.type || "info",
message: options,
})
};
["success", "error", "info", "warning"].forEach((type) => {
ZMessage[type] = function (options) {
if (isObject(options)) {
ZMessage({
type: type,
...options,
});
return;
}
ZMessage({
type,
message: options,
});
};
});
function isObject(content) {
return (
Object.prototype.toString.call(content) === "[object Object]" &&
!!content.message
);
}
function showMessage(options) {
msgInstance=Message({
...options
});
}
export default ZMessage;這樣就完美解決了上面出現(xiàn)的兩個問題，到這里目標基本已經(jīng)實現(xiàn)；但是，又想到如果要求不止出現(xiàn)一個message,我要只出現(xiàn)兩個甚至多個怎么辦，所以在方法四的基礎(chǔ)上，改造出來方法五，參考ant-design-vue,對最大數(shù)量可調(diào)配。
方法五
定義一個maxCount參數(shù)，需要message全局定義，在調(diào)用message方法之前，先定下message的最大數(shù)量，每次點擊彈框的時候都往messageList里面插入一個當前的message實例，close的時候?qū)⑦@條數(shù)據(jù)刪除，再給message新加一個config方法，maxCount就傳給config方法，在這個里面配置。
import { Message } from "element-ui";
// 定義message的當前數(shù)量
var messageList = [];
// 定義初始最大數(shù)量
var messageMaxCount = 0;
const ZMessage = function (options) {
if (messageMaxCount && messageList.length >= messageMaxCount) {
//更新彈框
messageList[0].close();
}
if (isObject(options)) {
const { type = "info", ...rest } = options;
messageList.push(
showMessage({
type,
...rest,
})
);
return;
}
messageList.push(
showMessage({
type: options.type || "info",
message: options,
})
);
};
["success", "error", "info", "warning"].forEach((type) => {
ZMessage[type] = function (options) {
if (isObject(options)) {
ZMessage({
type: type,
...options,
});
return;
}
ZMessage({
type,
message: options,
});
};
});
ZMessage.config = function (options) {
const { maxCount } = options;
if (maxCount) {
if (typeof maxCount !== "number") {
return console.error("參數(shù)類型錯誤:maxCount應(yīng)為number類型");
}
messageMaxCount = maxCount;
}
};
function isObject(content) {
return (
Object.prototype.toString.call(content) === "[object Object]" &&
!!content.message
);
}
function showMessage(options) {
const { onClose:close, ...rest } = options;
return Message({
...rest,
//關(guān)閉時，除了傳入的close方法，還需要將對應(yīng)的實例刪除
onClose: (val) => {
if(close){
close()
}
messageList = messageList.filter((item) => item.id != val.id);
},
});
}
export default ZMessage;
使用：
this.$message.config({
maxCount:3
})
最后
到這里，el-message就已經(jīng)改造完畢，你可以根據(jù)自己的實際情況使用上面的任意方法，希望這個文章能對你有所幫助，還有其他的辦法可以評論留言下，大家一起學習進步。
到此這篇關(guān)于vue中el-message的封裝使用的文章就介紹到這了,更多相關(guān)vue el-message封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2實現(xiàn)移動端上傳、預覽、壓縮圖片解決拍照旋轉(zhuǎn)問題
這篇文章主要介紹了vue2實現(xiàn)移動端上傳、預覽、壓縮圖片解決拍照旋轉(zhuǎn)問題,需要的朋友可以參考下2017-04-04
如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用
這篇文章主要教大家如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
vue elementui el-form rules動態(tài)驗證的實例代碼詳解
在使用elementUI el-form 中，對于業(yè)務(wù)不同的時候可能會產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動態(tài)驗證的實例代碼,需要的朋友可以參考下2019-05-05
vue實現(xiàn)Excel文件的上傳與下載功能的兩種方式
這篇文章主要介紹了vue實現(xiàn)Excel文件的上傳與下載功能，本文通過兩種方式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue之郵箱、密碼、手機號碼等輸入驗證規(guī)則說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
腳手架(vue-cli)創(chuàng)建Vue項目的超詳細過程記錄
用vue-cli腳手架可以快速的構(gòu)建出一個前端vue框架的項目結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于腳手架(vue-cli)創(chuàng)建Vue項目的超詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
本文主要介紹了element table多層嵌套顯示的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Axios是一個基于promise的HTTP庫，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請求庫之一,我們封裝axios請求也是為了讓代碼看的更加清晰,后期好維護2023-02-02
這篇文章主要介紹了Vue?插槽?(Slots)?源碼解析與用法,通過實例,我們?nèi)媪私饬四J插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源碼中的實現(xiàn)原理,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04