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