element按需加載以及修改element語言包（vue）

一般對於vue開發來說，element應該是web端常用的ui框架，默認情況下，會加載所有的組件，但是可能很多組件我們並不需要，官方也提供了組件化的方法。

默認情況下，我們使用element：

import Vue from "vue";
import Element from "element-ui";

Vue.use(Element, options);

按需加載：

// elementPlugin.js

import {Header, InfiniteScroll, Loading} from 'element-ui';

export default {
    install(Vue, options){
        const components = [Header];
        components.forEach(component => {
            Vue.component(component.name, component);
        });
        Vue.prototype.$ELEMENT = {
            size: options.size || "",
            zIndex: options.zIndex || 2000
        };
        Vue.use(InfiniteScroll);
        Vue.use(Loading.directive);
        Vue.prototype.$loading = Loading.service;
        Vue.prototype.$msgbox = MessageBox;
        Vue.prototype.$alert = MessageBox.alert;
        Vue.prototype.$confirm = MessageBox.$confirm;
        Vue.prototype.$prompt = MessageBox.prompt;
        Vue.prototype.$notify = Notification;
        Vue.prototype.$message = Message;
    }
}        

部分可能和官方文檔有區別，因為這里是直接從element源碼中間復制出來的

我們就可以使用默認的加載方式加載element了

import Vue from "vue";
import Element from "./elementPlugins";

Vue.use(Element, options);

element語言包切換：

import locale from "element-ui/lib/locale"
import en from "element-ui/lib/locale/lang/en";

locale.use(en);

但是有時候，我們可能需要自定義element里面的語言，我們嘗試打印一下語言包中間的信息

console.log(en);
// {"el":{"colorpicker":{"confirm":"OK","clear":"Clear"},"datepicker":{"now":"Now","today":"Today","cancel":"Cancel","clear":"Clear","confirm":"OK","selectDate":"Select date","selectTime":"Select time","startDate":"Start Date","startTime":"Start Time","endDate":"End Date","endTime":"End Time","prevYear":"Previous Year","nextYear":"Next Year","prevMonth":"Previous Month","nextMonth":"Next Month","year":"","month1":"January","month2":"February","month3":"March","month4":"April","month5":"May","month6":"June","month7":"July","month8":"August","month9":"September","month10":"October","month11":"November","month12":"December","week":"week","weeks":{"sun":"Sun","mon":"Mon","tue":"Tue","wed":"Wed","thu":"Thu","fri":"Fri","sat":"Sat"},"months":{"jan":"Jan","feb":"Feb","mar":"Mar","apr":"Apr","may":"May","jun":"Jun","jul":"Jul","aug":"Aug","sep":"Sep","oct":"Oct","nov":"Nov","dec":"Dec"}},"select":{"loading":"Loading","noMatch":"No matching data","noData":"No data","placeholder":"Select"}}}

　ps:不全，有興趣的可以自己打印一下

然后我們再看一下，他是如何找到對應的字段

export const t = function(path, options) {
  let value = i18nHandler.apply(this, arguments);
  if (value !== null && value !== undefined) return value;
    // 分割路徑
  const array = path.split('.');
  let current = lang;
    // 遍歷路徑找到對應的值
  for (let i = 0, j = array.length; i < j; i++) {
    const property = array[i];
    value = current[property];
    if (i === j - 1) return format(value, options);
    if (!value) return '';
    current = value;
  }
  return '';
};

　　所以這里就有思路了，我們只需要修改對應字段的值，就可以做到定制element語言包

// 根據路徑，覆蓋語言包的值
function getVal(data, key) {
      let _first = key.shift();
      const _data = data[_first];
      if (!(_data instanceof Object)) {
        return {};
      }
      if (key.length) {
        return getVal(_data, key);
      } else {
        return _data;
      }
    }

if (options.locale) {
        // 拷貝語言包，不能修改到原始的對象，雖然原始對象不太可能繼續用到
      const _locale = JSON.parse(JSON.stringify(options.locale));
         // 根據配置修改對應字段
      if (options.localeReplace) {
        for (let key in options.localeReplace) {
          const _array = key.split(".");
          // 分為兩部分，一部分是最后一個key，一部分是前面的，為了獲取引用而不是值
          const _lastKey = _array.pop();
          getVal(_locale, _array)[_lastKey] = options.localeReplace[key];
        }
      }
      locale.use(_locale);
 }


main.js

Vue.use(Element, {
  size: "small",
  zIndex: 3000,
  locale,
  localeReplace: {
    "el.pagination.pagesize": ""
  }
});

　最后，我們降pagination這個組件里面的默認字段設置為了空，本來應該顯示10pages，現在就顯示10