vue.js 国际化

433 阅读1分钟

说明

根据Element中国际化的文档说明,可以实现在前端的中英文操作,设置语言的时候在Cookie中存入名称为local的值记录,在每个页面加载时获取local,如果没有设置为默认 zh 中文,从而来设置页面中标签中英文的显示 使用步骤

  1. 在当前模块的js目录中 创建 uiLabels.js 存储中英文对照数据
    1
  2. 在页面中引入依赖的js ,在Vue实例中添加取到的i18n
    2
  3. 在页面中使用
    3

附录代码: cookieUtil.js

function setCookie(c_name,value,expiredays)
{
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")

}

function getCookie(c_name)
{
    if (document.cookie.length>0)
    {
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1)
        {
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return ""
}
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

getI18n.js

function  getI18n() {
    var locale = getCookie('locale');
    if(locale==""){
        locale="zh";
    }
    var i18n = new VueI18n({
        locale: locale,  // 语言标识
        messages
    })
    return i18n;
}