vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写。
国际化主要是利用 vue-i18n-next ,是因为项目使用composition api风格,需要最新兼容。
import elementEnLocale from 'element-plus/lib/locale/lang/en'
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn'
// User defined lang
import enLocale from './en'
import zhLocale from './zh-cn'
const messages = {
en: {
...enLocale,
...elementEnLocale
},
'zh-cn': {
...zhLocale,
...elementZhLocale
}
}
选择语言存储在cookie,getLanguage读取。
export const getLocale = () => {
//读取cookie存入的当前语言
const cookieLanguage = getLanguage()
//如果有返回当前语言
if (cookieLanguage) {
return cookieLanguage
}
//如果没有,获取系统语言
const language = navigator.language.toLowerCase()
//获取messages 语言 遍历
const locales = Object.keys(messages)
for (const locale of locales) {
//如果messsage 包里面有系统语言返回
if (language.indexOf(locale) > -1) {
return locale
}
}
// 默认语言 简体中文
return 'zh-cn'
}
const i18n = createI18n({
locale: getLocale(),
messages: messages
})
export default i18n
app.use(i18n)
模板:
<template>
{{ t('key') }}
</template>
ts:
setup() {
const { t } = useI18n()
return {
t
}
}
尝试直接写 $t()
也是可以的。
import { useStore } from '@/store'
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { AppActionTypes } from '@/store/modules/app/action-types'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
type Language = {
name: string
value: string
}
export default defineComponent({
setup() {
const store = useStore()
const { locale } = useI18n()
const state = reactive({
languages: [{ name: 'en', value: 'en' }, { name: '中文', value: 'zh-cn' }] as Array<Language>,
handleSetLanguage: (lang: string) => {
locale.value = lang
store.dispatch(AppActionTypes.ACTION_SET_LANGUAGE, lang)
ElMessage({
message: 'Switch Language Success',
type: 'success'
})
}
})
const language = computed(() => {
return store.state.app.language
})
return {
...toRefs(state),
language
}
}
})
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有