elementUI的二次封裝--提示框全局樣式

1、起因

在開發中，我們通常使用UI庫和自己寫的組件。自己寫的組件遇到需求變更了，那么，我們只要修改全局組件，就可以滿足我們的需求了，但是，我們通常使用三方UI庫，如果需求變更了，那么，UI庫就從全局組件變成了私有組件了

 

2、解決方案

使用UI庫前，封裝為全局組件

即，使用UI庫的組件前，自己寫一個全局組件，里面直接放三方UI的組件，這樣，如果發生全局樣式更改，功能更改，就不會影響原來的業務邏輯，無痛過渡。

 

可能需要用到render函數

 

prototype實現

則，進行攔截處理，類似中間件概念

 

3、例子

全局組件的方式，下篇文章再進行舉例子，這次例子為：prototype實現的二次封裝，在不動UI庫源碼的情況下實現自己需要的需求

 

1、例子目標：Notification、Message

這兩個是elementUI的彈框，但是，在實際使用中，這兩個提示框經常被蒙層遮蓋，由於elementUI中的z-index是動態計算的，沒有時間研究源碼，所以，我們得給這兩個東西添加樣式，查看官網提供的方法如下：

 

 

意味着我們每次調用的時候，都要多寫這個參數，如果有其他更改，還得重新全局查找，替換，十分麻煩

 

2、改造--查看源碼

import Vue from 'vue';
import Main from './main.vue';
import { PopupManager } from 'element-ui/src/utils/popup';
import { isVNode } from 'element-ui/src/utils/vdom';
let MessageConstructor = Vue.extend(Main);

let instance;
let instances = [];
let seed = 1;

const Message = function(options) {
  if (Vue.prototype.$isServer) return;
  options = options || {};
  if (typeof options === 'string') {
    options = {
      message: options
    };
  }
  let userOnClose = options.onClose;
  let id = 'message_' + seed++;

  options.onClose = function() {
    Message.close(id, userOnClose);
  };
  instance = new MessageConstructor({
    data: options
  });
  instance.id = id;
  if (isVNode(instance.message)) {
    instance.$slots.default = [instance.message];
    instance.message = null;
  }
  instance.$mount();
  document.body.appendChild(instance.$el);
  let verticalOffset = options.offset || 20;
  instances.forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16;
  });
  instance.verticalOffset = verticalOffset;
  instance.visible = true;
  instance.$el.style.zIndex = PopupManager.nextZIndex();
  instances.push(instance);
  return instance;
};

['success', 'warning', 'info', 'error'].forEach(type => {
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      };
    }
    options.type = type;
    return Message(options);
  };
});

Message.close = function(id, userOnClose) {
  let len = instances.length;
  let index = -1;
  for (let i = 0; i < len; i++) {
    if (id === instances[i].id) {
      index = i;
      if (typeof userOnClose === 'function') {
        userOnClose(instances[i]);
      }
      instances.splice(i, 1);
      break;
    }
  }
  if (len <= 1 || index === -1 || index > instances.length - 1) return;
  const removedHeight = instances[index].$el.offsetHeight;
  for (let i = index; i < len - 1 ; i++) {
    let dom = instances[i].$el;
    dom.style['top'] =
      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';
  }
};

Message.closeAll = function() {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close();
  }
};

export default Message;

 

 

以上node_modules里面elementUI的代碼，侵刪！！！

 

3、實現過程

我們看到，最后是：export default Message;

我們引用的時候：

 

import Vue from 'vue';
import { Message } from 'element-ui';
Vue.prototype.$message = Message;

 

 

所以，我們只要在代碼：Vue.prototype.$message = Message  的時候將Message替換為我們二次封裝的就行了，而Notification源碼和Message基本上一樣的。那么，看核心代碼：

 

// 封裝默認class
const notify = option =>
  Notification(Object.assign({ customClass: 'notify_class' }, option))
const $message = option =>
  Message(Object.assign({ customClass: 'notify_class' }, option))
const optionsBox = (options, type) => {
  if (typeof options === 'string') {
    options = { message: options }
  }
  options.type = type
  return options
}
let typeArr = ['success', 'warning', 'info', 'error']
Object.keys(Notification).forEach(type => {
  if (typeArr.includes(type)) {
    notify[type] = options => notify(optionsBox(options, type))
    $message[type] = options => $message(optionsBox(options, type))
  } else {
    notify[type] = Notification[type]
    $message[type] = Message[type]
  }
})

Vue.prototype.$notify = notify
Vue.prototype.$message = $message

 

 

以上，就可以全局添加樣式class了，代碼量有點多，只為了添加一個class，感覺不划算，但是，這還可以繼續添加其他的全局功能，不止class