tsl-locale
v1.0.4
Published
国际化基于Vue I18n实现,详情配置请参照[https://kazupon.github.io/vue-i18n/zh/](https://kazupon.github.io/vue-i18n/zh/)
Downloads
2
Readme
国际化
国际化基于Vue I18n实现,详情配置请参照https://kazupon.github.io/vue-i18n/zh/
这里将列举常用配置
本组件默认已开启延迟加载翻译(一次加载所有翻译文件是过度和不必要的)
安装:
yarn add tsl-locale
初始化:
import Vue from 'vue' import App from './App.vue' import tslI18n from "tsl-locale"; new Vue({ render: h => h(App), i18n: tslI18n("zh") //'zh'为默认语言包名称,会加载/src/assets/lang下的zh.json文件 }).$mount('#app')
使用:
//一下两种方式效果一样,建议优先使用 v-t 命令模式 <h1>{{ $t("hello.title") }}</h1> <h1 v-t="'hello.title'"></h1>
在script中使用
console.log(this.$i18n.tc("hello.title")); //由于语言包全部为异步加载,目前未提供加载完成钩子,this.$i18n.tc尽量不在created生命周期中调用
语言环境获取与变更:
this.setLang('zh'); console.log(this.getLang());
需要在语言包目录路径: src/assets/lang添加所支持的语言包文件,格式例如zh.json
{ "sidebar": { "/": "首页", "/blank": "空白页", "listName": "列表合集" }, "hello": { "title": "你好,特斯联!", "changeBtn": "变更语言" } }
加载网络资源(语言包),动态加载
//初始化网络语言包 new Vue({ render: (h) => h(App), i18n: tslI18n({ name: 'cn', url: 'http://qtea17lxj.hn-bkt.clouddn.com/en.json' }), router: tslRouter(routers), }).$mount("#app"); //设置网络语言包 this.setLang('cn', 'http://qtea17lxj.hn-bkt.clouddn.com/en.json');
i8n官网其它配置,如日期格式化,数字本地化,如下初始化:
import tslI18n from "tsl-locale"; new Vue({ render: h => h(App), i18n: tslI18n("zh", { dateTimeFormats, numberFormats }), }).$mount("#app");