tsl-locale

    1.0.4 • Public • Published

    国际化

    国际化基于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");

    Keywords

    none

    Install

    npm i tsl-locale

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    6.6 kB

    Total Files

    3

    Last publish

    Collaborators

    • yangxun