vue中el-message的封裝使用

2022-02-08 13:01:13

前言

最近對專案進行改造，發現在el-message使用中，如果遇到伺服器掛了或者在重啟等其他情況，頁面message會彈出一大堆報錯資訊，看起來很不美觀，所以對el-message進行重寫改造，這裡記錄下改造中遇到的問題和實現，希望能對你有點幫助。

實現方法

實現方法有很多種，可以根據你實際專案情況決定使用哪一種。

方法一

直接css裡面給這個樣式，簡單省事，但是這樣子有一個問題所有的message都重疊在一起，淺入淺出的動畫效果不好，不是很推薦。

.el-message {
  top: 20px !important;
}

方法二

直接使用el-message的closeAll方法，彈訊息之前關閉所有的訊息，也很簡單，但是這樣會有一個明顯的抖動，所以也不是很推薦(不介意的話也可以這樣寫)。

  this.$message.closeAll();
  this.$message.error("錯誤提示3");

方法三(有殘缺的方法，可以帶著問題看方法4)

對message進行改造，重寫message方法，新建一個message.js,定義一個class類,給這個class賦予success,error,info,warning4個方法，根據el-message的使用方法，分為：this.$message.success('測試成功訊息') 和this.$message({type:'success',message:'測試成功訊息'})這兩種情況，所以要根據傳入的值是字串還是物件做一下判斷。

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的數量，如果小於1，就彈訊息，仔細觀察message，我們可以通過document.getElementsByClassName("el-message").length來獲取當前彈框的數量，如果大於等於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,
          });
        }
      };
    });
  }
}

這樣彈訊息即使多次觸發，也只會彈一個訊息出來，正當我以為已經完事了，卻發現還有新的問題：

問題1：this.$message({type:'error',message:'測試訊息'}) 報錯了
問題2：彈的訊息不會更新，必須要等上一條訊息消失後，才會出現新的

方法四

對於方法三存在的兩個問題，所以我們需要對方法三進行改造，還是那個檔案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變數，如果有新的值來了，就關閉上一個訊息

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;

這樣就完美解決了上面出現的兩個問題，到這裡目標基本已經實現；但是，又想到如果要求不止出現一個message,我要只出現兩個甚至多個怎麼辦，所以在方法四的基礎上，改造出來方法五，參考ant-design-vue,對最大數量可調配。

方法五

定義一個maxCount引數，需要message全域性定義，在呼叫message方法之前，先定下message的最大數量，每次點選彈框的時候都往messageList裡面插入一個當前的message範例，close的時候將這條資料刪除，再給message新加一個config方法，maxCount就傳給config方法，在這個裡面設定。

import { Message } from "element-ui";
 // 定義message的當前數量
 var messageList = [];
 // 定義初始最大數量
 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("引數型別錯誤:maxCount應為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,
     //關閉時，除了傳入的close方法，還需要將對應的範例刪除
     onClose: (val) => {
       if(close){
         close()
       }
       messageList = messageList.filter((item) => item.id != val.id);
     },
   });
 }
 
 export default ZMessage;

使用：

 this.$message.config({
   maxCount:3
 })

最後

到這裡，el-message就已經改造完畢，你可以根據自己的實際情況使用上面的任意方法，希望這個文章能對你有所幫助，還有其他的辦法可以評論留言下，大家一起學習進步。

到此這篇關於vue中el-message的封裝使用的文章就介紹到這了,更多相關vue el-message封裝內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vue中el-message的封裝使用

目錄

前言

實現方法

方法一

方法二

方法三(有殘缺的方法，可以帶著問題看方法4)

方法四

方法五

最後

熱門文章