vue3中使用vue

vue3中使用vue

一、安装

npm install vue-i18n
yarn add vue-i18n

二、新建i18n文件

import { createI18n } from 'vue-i18n'let messages = {zh: {hello: '你好',},en: {hello: 'hello',}
}const i18n = createI18n({locale: Item('lang') || 'zh', // 设置当前语言类型legacy: false, // 如果要支持compositionAPI，此项必须设置为false;globalInjection: true, // 全局注册$t方法messages
})export default i18n

三、main.js中注册

import i18n from './i18n'
app.use(i18n)

四、vue3中使用

1、模板中使用
<el-button type="primary" @click="handleQuery">{{ $t('search') }}</el-button>2、属性中使用
<el-table-column :label="$t('personName')" prop="firstName" />3、setup中使用
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 解构出t方法
//用监听创建变量，才能保证响应式
const userAccount = computed(()=>{return t('userAccount')
})4、js文件中使用方法1
import i18n from '@/i18n' //如果是vue文件以外的地方使用，可用这种方式(比如路由)
const status = i18n.global.t('status')  方法2
//把js文件中跟国际化相关的内容定义成字符串，在vue组件中要用的时候，再使用eval转化成对象使用。如：
export const tableDemoColumn = `[{ prop: 'menuName', label: '菜单名称' },{ prop: status, label: t('status') }
]`
在vue组件中使用时：
import { useI18n } from 'vue-i18n'
import { tableDemoColumn } from './table.js'const { t } = useI18n()
const tableColumn = ref(eval(tableDemoColumn))两种方法比较
方法1使用起来简单，但是不能实时切换语言；
方法2使用起来麻烦，但可以实现实时切换语言。

五、设置全局语言切换，从远程获取语言包

1、导航栏设置语言下拉
<el-dropdown class="right-menu-item hover-effect" @command="changeLanguage" style="padding-top: 20px;"><span class="el-dropdown-link" style="color:#fff">{{ curLanguageName }}<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-itemv-for="item of languageList":key="item.value":command="item.value">{{ item.label }}</el-dropdown-item></el-dropdown-menu></template></el-dropdown>2、切换语言获取接口语言包
import { useI18n } from 'vue-i18n'
const { locale, t, setLocaleMessage } = useI18n()
const curLanguage = ref("zh")
const curLanguageName = ref("中文")
const languageList = ref([{value: 'zh',label: '中文'
},{value: 'en',label: '英文'
}])// 获取语言包
function initLanguage(lang = 'zh', isInit) {emits('toggleLanguage', lang)getLanguagePack(lang).then(res => {if(res.data && res.data[lang]){setLocaleMessage(lang, res.data[lang]); // 设置语言包isInit && proxy.$modal.msgSuccess("语言设置成功");}else{proxy.$modal.msgError("语言设置失败");}});
}
// 切换语言
function changeLanguage(lang) {console.log("lang", lang);curLanguage.value = langlocale.value = lang;localStorage.setItem("curLanguage", lang);languageList.value.forEach(item =>{if(item.value === lang){curLanguageName.value = item.label}})initLanguage(lang, true)
}

六、element-plus组件切换语言

<template><el-config-provider :locale="locale" size="small"><div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"><div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /><sidebar v-if="!sidebar.hide" class="sidebar-container" /><div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"><div style="height:98px"><div class="fixed-header"><navbar @setLayout="setLayout" @toggleLanguage="toggleFn" /><tags-view v-if="needTagsView" /></div></div><app-main /><settings ref="settingRef" /></div></div></el-config-provider>
</template><script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'const language = ref('zh')
const locale = computed(() => (language.value === 'zh' ? zhCn : en))const toggleFn = (lang) => {language.value = lang === 'zh' ? 'zh' : 'en' 
}
</script>