一、概述
·en-US – 英语（美国）默认为英语
·zh-CN – 简体中文
二、基础配置
请使用 UIKitProvider 包装你的应用，并配置语言选项：
<template> <UIKitProvider language="zh-CN"> <YourApp /> </UIKitProvider></template><script setup lang="ts">import { UIKitProvider } from '@tencentcloud/chat-uikit-vue3';import YourApp from './YourApp.vue';</script>
三、在组件外切换语言
<template> <div> <button @click="setLang('zh-CN')">中文</button> <button @click="setLang('en-US')">English</button> <div>当前的语言是: {{ lang }}</div> <UIKitProvider :language="lang" theme="light" > <YourApp /> </UIKitProvider> </div></template><script setup lang="ts">import { ref } from 'vue';import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';import YourApp from './YourApp.vue';type Language = 'en-US' | 'zh-CN';const lang = ref<Language>('zh-CN');const setLang = (language: Language) => { lang.value = language;};</script>
四、在组件内切换语言
在组件内可以使用 useUIKit Hook 访问国际化功能。
<template> <div> <div>当前的语言是: {{ language }}</div> <div>{{ t('MessageInput.enter') }}</div> <button @click="setLanguage('en-US')">English</button> <button @click="setLanguage('zh-CN')">中文</button> </div></template><script setup lang="ts">import { useUIKit } from '@tencentcloud/chat-uikit-vue3';const { t, language, setLanguage } = useUIKit();</script>
五、多语言支持/修改语言词条/新增语言
展示如何使用多语言功能：
<script lang="ts" setup>import { UIKitProvider, useUIKit } from '@tencentcloud/chat-uikit-vue3';import YourApp from './YourApp.vue';const customLanguageResources = [ // 替换现有词条 { lng: 'zh-CN', translation: { MessageInput: { send: '我要发送', // 默认是"发送" }, }, }, // 新增一种语言 { lng: 'fr', translation: { MessageInput: { send: 'Je veux envoyer', }, }, },];</script><template> <UIKitProvider language="fr" theme="light"> <YourApp /> </UIKitProvider></template>
六、实践示例 —— 语言检测与持久化
<template> <UIKitProvider :language="language" :language-resources="customResources" > <YourApp /> </UIKitProvider></template><script setup lang="ts">import { ref, watch } from 'vue';import { UIKitProvider } from '@tencentcloud/chat-uikit-vue3';import YourApp from './YourApp.vue';type SupportedLanguage = 'en-US' | 'zh-CN';// 智能语言检测函数const detectLanguage = (): SupportedLanguage => { // 1. 优先使用保存的语言设置 const saved = localStorage.getItem('language') as SupportedLanguage; if (saved) return saved; // 2. 自动检测浏览器语言 const browserLang = navigator.language; if (browserLang.startsWith('zh')) return 'zh-CN'; else return 'en-US'; // 3. 默认回退 return 'auto';};// 初始化语言const language = ref<SupportedLanguage>(detectLanguage());// 监听语言变化并持久化watch(language, (newLang) => { localStorage.setItem('language', newLang); console.log(`语言已切换为: ${newLang}`);}, { immediate: true });</script>
七、注意事项
1. 提供者位置：UIKitProvider 建议用于即时通信所有组件的上层。
2. 语言资源：自定义语言资源会与内置资源合并，相同 key 会覆盖内置资源。
3. 类型安全：使用 TypeScript 时，确保传入的配置符合类型定义。
八、相关文档
·自定义组件 – UIKitProvider
·自定义组件 – ConversationList
·自定义组件 – Chat
·自定义组件 – MessageInput
·自定义组件 – MessageList
·自定义组件 – ChatSetting
·自定义组件 – C2CSetting State
·自定义组件 – GroupSetting State
·自定义组件 – ContactList
·自定义组件 – Search
·chat-uikit-vue3 npm
·GitHub Demo
九、交流与反馈
如遇任何问题，可联系 页面售后 反馈，享有专业工程师的支持，解决你的难题。