Vue TUIKit
on Web & H5 platforms comes standard with Simplified Chinese and English language packs, serving as the display language for the interface.Simplified Chinese | English |
| |
import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";// change language to chineseTUITranslateService.changeLanguage("zh");// change language to englishTUITranslateService.changeLanguage("en");
TUITranslateService.changeLanguage
to switch languages, your current language won't be updated instantly, you need to refresh the page for the changes to take effect.page/component key
.TUIConversation
language:<template><div class="home"><div class="button-container"><div class="button" @click="changeLanguage('en')">English</div><div class="button" @click="changeLanguage('zh')">Simplified Chinese</div></div><div class="conversation-container"><TUIConversation :key="locale" /></div></div></template><script setup lang="ts">import { ref } from "vue";import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";import { TUIConversation } from "./TUIKit";const locale = ref("zh");const changeLanguage = (language: string) => {TUITranslateService.changeLanguage(language).then(() => {locale.value = language;});};</script><style scoped lang="scss">.home {width: 400px;.button-container {display: flex;flex-direction: column;.button {margin: 10px;background-color: #006eff;color: #ffffff;text-align: center;padding: 5px;border-radius: 30px;cursor: pointer;}}}</style>
src/TUIKit/locales
directory.TUITranslateService.t()
is used for term translation. More information about this interface can be found in TUITranslateService.<template><div>{{TUITranslateService.t("TUIChat.${yourLocaleKey}")}}</div></template><script setup lang="ts">import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";</script>
Was this page helpful?