vue中el-message如何封裝使用

這篇文章將為大家詳細講解有關vue中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
 })

關于“vue中el-message如何封裝使用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。