vue中el-message的封裝使用
前言
最近對(duì)項(xiàng)目進(jìn)行改造，發(fā)現(xiàn)在el-message使用中，如果遇到服務(wù)器掛了或者在重啟等其他情況，頁(yè)面message會(huì)彈出一大堆報(bào)錯(cuò)信息，看起來(lái)很不美觀，所以對(duì)el-message進(jìn)行重寫(xiě)改造，這里記錄下改造中遇到的問(wèn)題和實(shí)現(xiàn)，希望能對(duì)你有點(diǎn)幫助。
實(shí)現(xiàn)方法
實(shí)現(xiàn)方法有很多種，可以根據(jù)你實(shí)際項(xiàng)目情況決定使用哪一種。
方法一
直接css里面給這個(gè)樣式，簡(jiǎn)單省事，但是這樣子有一個(gè)問(wèn)題所有的message都重疊在一起，淺入淺出的動(dòng)畫(huà)效果不好，不是很推薦。
.el-message {
? top: 20px !important;
}
方法二
直接使用el-message的closeAll方法，彈消息之前關(guān)閉所有的消息，也很簡(jiǎn)單，但是這樣會(huì)有一個(gè)明顯的抖動(dòng)，所以也不是很推薦(不介意的話(huà)也可以這樣寫(xiě))。
? this.$message.closeAll();
? this.$message.error("錯(cuò)誤提示3");
方法三(有殘缺的方法，可以帶著問(wèn)題看方法4)
對(duì)message進(jìn)行改造，重寫(xiě)message方法，新建一個(gè)message.js,定義一個(gè)class類(lèi),給這個(gè)class賦予success,error,info,warning4個(gè)方法，根據(jù)el-message的使用方法，分為：this.$message.success('測(cè)試成功消息') 和this.$message({type:'success',message:'測(cè)試成功消息'})這兩種情況，所以要根據(jù)傳入的值是字符串還是對(duì)象做一下判斷。
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重寫(xiě)第一步就完成了，第二步需要判斷當(dāng)前message的數(shù)量，如果小于1，就彈消息，仔細(xì)觀察message，我們可以通過(guò)document.getElementsByClassName("el-message").length來(lái)獲取當(dāng)前彈框的數(shù)量，如果大于等于1就不再?gòu)椏?，如果小?就彈框。
class ZMessage {
constructor() {
["success", "error", "info", "warning"].forEach((type) => {
this[type] = function (options) {
//這里加一個(gè)判斷
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ā)，也只會(huì)彈一個(gè)消息出來(lái)，正當(dāng)我以為已經(jīng)完事了，卻發(fā)現(xiàn)還有新的問(wèn)題：
- 問(wèn)題1：this.$message({type:'error',message:'測(cè)試消息'}) 報(bào)錯(cuò)了
- 問(wèn)題2：彈的消息不會(huì)更新，必須要等上一條消息消失后，才會(huì)出現(xiàn)新的
方法四
對(duì)于方法三存在的兩個(gè)問(wèn)題，所以我們需要對(duì)方法三進(jìn)行改造，還是那個(gè)文件message.js，這里不用class了，因?yàn)閷?duì)外export的方法是new ZMessage()，message的值無(wú)法直接傳遞過(guò)來(lái)，暫時(shí)還沒(méi)有想好咋傳過(guò)來(lái)，所以就不用class了，所以對(duì)ZMessage進(jìn)行下改造
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;這樣第一個(gè)問(wèn)題，this.$message({type:'error',message:'測(cè)試消息'})就不會(huì)報(bào)錯(cuò)了，接下來(lái)解決第二個(gè)問(wèn)題，值不會(huì)更新的問(wèn)題，可以定義一個(gè)msgInstance變量，如果有新的值來(lái)了，就關(guān)閉上一個(gè)消息
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)的兩個(gè)問(wèn)題，到這里目標(biāo)基本已經(jīng)實(shí)現(xiàn)；但是，又想到如果要求不止出現(xiàn)一個(gè)message,我要只出現(xiàn)兩個(gè)甚至多個(gè)怎么辦，所以在方法四的基礎(chǔ)上，改造出來(lái)方法五，參考ant-design-vue,對(duì)最大數(shù)量可調(diào)配。
方法五
定義一個(gè)maxCount參數(shù)，需要message全局定義，在調(diào)用message方法之前，先定下message的最大數(shù)量，每次點(diǎn)擊彈框的時(shí)候都往messageList里面插入一個(gè)當(dāng)前的message實(shí)例，close的時(shí)候?qū)⑦@條數(shù)據(jù)刪除，再給message新加一個(gè)config方法，maxCount就傳給config方法，在這個(gè)里面配置。
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ù)類(lèi)型錯(cuò)誤:maxCount應(yīng)為number類(lèi)型");
}
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)閉時(shí)，除了傳入的close方法，還需要將對(duì)應(yīng)的實(shí)例刪除
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ù)自己的實(shí)際情況使用上面的任意方法，希望這個(gè)文章能對(duì)你有所幫助，還有其他的辦法可以評(píng)論留言下，大家一起學(xué)習(xí)進(jìn)步。
到此這篇關(guān)于vue中el-message的封裝使用的文章就介紹到這了,更多相關(guān)vue el-message封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗(yàn)
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗(yàn)的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
Javascript vue.js表格分頁(yè)，ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁(yè)，ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關(guān)于Vue中forEach()使用方法的相關(guān)資料,forEach和map是數(shù)組的兩個(gè)方法,作用都是遍歷數(shù)組,在vue項(xiàng)目的處理數(shù)據(jù)中經(jīng)常會(huì)用到,需要的朋友可以參考下2023-09-09
手把手帶你封裝一個(gè)vue component第三方庫(kù)
這篇文章主要介紹了手把手帶你封裝一個(gè)vue component第三方庫(kù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
由于目前公司采用了ProtoBuf做前后端數(shù)據(jù)交互，進(jìn)公司以來(lái)一直用的是公司大神寫(xiě)好的基礎(chǔ)庫(kù)，完全不了解底層是如何解析的。下面小編給大家分享vue中使用protobuf的過(guò)程記錄，需要的朋友參考下吧2018-10-10
這篇文章主要介紹了vue使用nprogress加載路由進(jìn)度條的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了理順8個(gè)版本vue的區(qū)別(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3響應(yīng)式原理之Ref用法及說(shuō)明
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue怎樣獲取當(dāng)前時(shí)間,并且傳遞給后端(不用注解)
這篇文章主要介紹了vue怎樣獲得當(dāng)前時(shí)間,并且傳遞給后端(不用注解)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09