煮茶忘放糖的博客

简简单单写点文章

Vue3+TS 任意vue组件中变更NaiveUI 全局组件语言

上一篇 《Vue3+TS i18n插件使用与配置》 文章,我们已经有了一个 i18n.global.locale.value 参数,它可以设置和获取当前语言,那么我们可以在NaiveUI 全局配置初始化的时候就赋值,这样就能达到切换页面中自定义文字语言时顺带切换UI组件语言,这也就是为什么执行setLanguage方法的时候会加重新加载页面代码了,如果有更好的实现方法可以在评论区回复,感谢!

在App.vue文件内设置 NaiveUI 全局配置参数,包括自定义主题样式,默认语言等信息。

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup

import { NConfigProvider, GlobalThemeOverrides, zhCN,enUS,dateZhCN,dateEnUS } from 'naive-ui'

import { reactive } from 'vue'
import i18n from "./i18n";

const languageDict = reactive({
"zh-CN": zhCN,
"en-US": enUS,
})

const dateLanguageDict = reactive({
"zh-CN": dateZhCN,
"en-US": dateEnUS,
})
// @ts-ignore: 这是官方的错误,本身现在它就是一个ComputedRefImpl类型的参数
const locale = languageDict[i18n.global.locale.value as keyof typeof languageDict]
// @ts-ignore
const dateLanguage = dateLanguageDict[i18n.global.locale.value as keyof typeof dateLanguageDict];

const themeOverrides: GlobalThemeOverrides = {
// 这里是主题配置信息
}

</script>

<template>
<n-config-provider :theme-overrides="themeOverrides" :locale="locale" :date-locale="dateLanguage">
<router-view ></router-view>
</n-config-provider>
</template>

<style lang="scss">
</style>