MySQL数据类型

使用变形测试测(metamorphic testing)试您的机器学习算法

  返回  

vue 使用vue-i18n实现中英文语言切换

2021/7/21 11:51:54 浏览:

一、安装。

npm install vue-i18n

二、使用。(这里只写了核心代码)

引入:

// 引入插件和语言包
import VueI18n from 'vue-i18n'
import zh from '@/i18n/langs/zh'
import en from '@/i18n/langs/en'
Vue.use(VueI18n);

zh文件:

export default {
    placeStopOrder:"下止损单",
}

en文件:

export default {
    placeStopOrder:"Place Stop Order",
}

使用:

// 自动设置多语言 默认选择浏览器系统语言
const navLang       = navigator.language;    //判断当前浏览器使用的语言
const localLang     = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
let lang            = localStorage.getItem('language') || localLang || 'en-US';    //如果有缓存,取缓存的语言
const i18n          = new VueI18n({
    locale: lang,
    messages:{
        'zh': zh, // 中文语言包
        'en': en // 英文语言包
    },
    silentTranslationWarn: true
});
localStorage.setItem('language',lang);    //最后缓存当前使用的语言

注册并挂载:

window._vm = new Vue({
    router,
    store,
    i18n,    //注意
    render: h => h(App)
}).$mount('#app');

“window._vm”:将new实例挂载到window,方便其他单独js文件中获取语言。

三、切换语言。

切换语言的核心代码:

        //切换语言
        changeLanguage(lang){
            this.$i18n.locale = lang;
            localStorage.setItem('language',lang);
        }

调用时,中文传:'en-US',英文传:'zh-CN',跟配置的时候一致就行了。

说明:先将内存的语言修改了,代码:this.$i18n.locale = lang;再将缓存的语言也修改了。

四、获取。

普通的页面渲染时:

<div>{{this.$t("placeStopOrder")}}</div>

当在某个js配置文件中时,没有this:

_vm.$t("placeStopOrder");

最后,这里面的代码是抽离出来的,没有经过单独调试,如果有什么问题,请跟我私信或者是评论。

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号