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