日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 Vue 正文

vue中el-message的封裝使用_vue.js

作者：我亞索賊六丶 ? 更新時間： 2022-04-11 Vue

前言

最近對項目進行改造，發現在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就已經改造完畢，你可以根據自己的實際情況使用上面的任意方法，希望這個文章能對你有所幫助，還有其他的辦法可以評論留言下，大家一起學習進步。

原文鏈接：https://juejin.cn/post/7061837404335767565

欄目分類
最近更新