说明
element
很注重多语言,自己进行了处理,如果存在vue-i18n
则使用它,否则使用自己实现的工具。
index.js
// 引入默认语言,是一个 JSON
import defaultLang from 'element-ui/src/locale/lang/zh-CN';
// 引入 Vue
import Vue from 'vue';
// 引入 deepmerge 库,这是用来深度合并对象的
import deepmerge from 'deepmerge';
// 格式化,这里其实是字符串模板
import Format from './format';
// 构造模板函数
const format = Format(Vue);
// 语言设置为默认语言
let lang = defaultLang;
// 标识是否合并过
let merged = false;
export const t = function(path, options) {
// 获取 vue-i18n的模板方法
const vuei18n = Object.getPrototypeOf(this || Vue).$t;
// 如果有引入 vue-i18n 则使用它
if (typeof vuei18n === 'function') {
if (!merged) {
// 设置已经合并
merged = true;
// 配置 vue-i18n
Vue.locale(
Vue.config.lang,
deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
);
}
// 使用 vue-i18n
return vuei18n.apply(this, [path, options]);
}
// 为了访问对象
const array = path.split('.');
// 当前先设置为整个语言信息
let current = lang;
// 根据对象层次进一步访问
for (var i = 0, j = array.length; i < j; i++) {
var property = array[i];
var value = current[property];
if (i === j - 1) return format(value, options); // 寻找到最后一层访问
if (!value) return '';
current = value;
}
return '';
};
// 改变语言
export const use = function(l) {
lang = l || lang;
};
export default { use, t };
format.js
/**
* String format template
* - Inspired:
* https://github.com/Matt-Esch/string-template/index.js
*/
// 用来匹配形如 %{} 或者 {} 格式的参数
const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
// 参数是 Vue
export default function(Vue) {
// 获取
const { hasOwn } = Vue.util;
/**
* template
*
* @param {String} string
* @param {Array} ...args
* @return {String}
*/
function template(string, ...args) {
// 处理第二个参数传对象或者数组的情况
if (args.length === 1 && typeof args[0] === 'object') {
args = args[0];
}
// 处理没有传参数或者参数不是对象的情况
if (!args || !args.hasOwnProperty) {
args = {};
}
// 替换匹配到的参数
return string.replace(RE_NARGS, (match, prefix, i, index) => {
let result;
if (string[index - 1] === '{' &&
string[index + match.length] === '}') {
// 形如 {{ val }} 直接返回, { val },不进行解析
return i;
} else {
// 取得相应的值进行替换,不存在的话则替换为空
result = hasOwn(args, i) ? args[i] : null;
if (result === null || result === undefined) {
return '';
}
return result;
}
});
}
// 返回该函数
return template;
}