@qingbing/ts-vue3-i18n v2.0.3

ts-vue3-i18n

• 2.0.1
  • 功能基本 ok
• 2.0.2
  • 完善使用说明
• 2.0.3
  • 修正 key 中间不存在的情况的 bug

1. 功能说明

typescript 实现的在 vue3 中的 i18n 功能

2. 下载

npm i @qingbing/ts-vue3-i18n

3. vue3 中全局注册

在 main.ts 中全局注册

import I18N from "@qingbing/ts-vue3-i18n"
app.use(I18N, {
    language: 'default',
    // emptyForKey: false,
    messages: {
        info: {
            user: {
                name: "bing",
                sex: "female"
            }
        }
    }
})

4. 使用

4.1 在 template 模板中获取语言信息

{{ $t("info.user.name") }}

4.2 在 main.ts 中使用 app 设置和获取语言

// 添加新key
app.config.globalProperties.$tLang.addLanguage({
    info: {
        user: {
            age: 10,
        }
    }
});
// 获取消息
console.log(app.config.globalProperties.$t("info.user.sex"));

4.3 在组件中使用 proxy 设置和获取语言

<script setup lang="ts">
import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

// 添加新key
proxy.$tLang.addLanguage({
  info: {
    user: {
      mail: "qq.com",
    },
  },
});

// 获取消息
console.log(proxy?.$t("info.user.mail"));
</script>