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重寫第一步就完成了，第二步需要判斷當(dāng)前message的數(shù)量，如果小于1，就彈消息，仔細觀察message，我們可以通過document.getElementsByClassName("el-message").length來獲取當(dāng)前彈框的數(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ā)，也只會彈一個消息出來，正當(dāng)我以為已經(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)的兩個問題，到這里目標(biāo)基本已經(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里面插入一個當(dāng)前的message實例，close的時候?qū)⑦@條數(shù)據(jù)刪除，再給message新加一個config方法，maxCount就傳給config方法，在這個里面配置。
import { Message } from "element-ui";
// 定義message的當(dāng)前數(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ù)自己的實際情況使用上面的任意方法，希望這個文章能對你有所幫助，還有其他的辦法可以評論留言下，大家一起學(xué)習(xí)進步。
到此這篇關(guān)于vue中el-message的封裝使用的文章就介紹到這了,更多相關(guān)vue el-message封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實用價值，需要的朋友可以參考下2018-12-12
Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關(guān)于Vue中forEach()使用方法的相關(guān)資料,forEach和map是數(shù)組的兩個方法,作用都是遍歷數(shù)組,在vue項目的處理數(shù)據(jù)中經(jīng)常會用到,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了手把手帶你封裝一個vue component第三方庫，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
由于目前公司采用了ProtoBuf做前后端數(shù)據(jù)交互，進公司以來一直用的是公司大神寫好的基礎(chǔ)庫，完全不了解底層是如何解析的。下面小編給大家分享vue中使用protobuf的過程記錄，需要的朋友參考下吧2018-10-10
這篇文章主要介紹了vue使用nprogress加載路由進度條的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了理順8個版本vue的區(qū)別(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue怎樣獲取當(dāng)前時間,并且傳遞給后端(不用注解)
這篇文章主要介紹了vue怎樣獲得當(dāng)前時間,并且傳遞給后端(不用注解)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue 項目引入echarts 添加點擊事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09