詳解vue element plus多語(yǔ)言切換
前言
最近接手一個(gè)項(xiàng)目,該項(xiàng)目多國(guó)家使用,需要支持多語(yǔ)言的切換,在此記錄。
解決一下問(wèn)題:
- 如何實(shí)現(xiàn)多語(yǔ)言切換 ?
- 如何動(dòng)態(tài)切換語(yǔ)言并更改elementUI語(yǔ)言 ?
- 更改完elementUI組件視圖不更新?
- 如何全局使用 $t 函數(shù) ?
- 如何在js文件里使用vue-i18n ?
如何實(shí)現(xiàn)多語(yǔ)言切換 ?
1、安裝包vue-i18n
npm i vue-i18n --save
2、在src目錄下新建如圖:
en.js
const EN = { login: { title: 'User Login' }, } export default EN
pl-pl.js
const PL_PL = { login: { title: 'U?ytkownik jest zalogowany' }, } export default PL_PL
zh-cn.js
const ZH_CN = { login: { title: '用戶(hù)登錄' }, } export default ZH_CN
index.js
import { createI18n } from 'vue-i18n/index' import 'dayjs/locale/zh-cn' import zh from './zh-cn' import en from './en' import pl from './pl-pl' const messages = { 'zh-cn': zh, 'en': en, 'pl': pl } // Gets the current locale export function getLanguage() { // Use the language of choice const chooselang = localStorage.getItem('locale') if (chooselang) return chooselang // if not shoose language const lang = (navigator.language || navigator.browserLanguage).toLowerCase() const locales = Object.keys(messages) return locales.includes(lang) ? lang : 'zh-cn' } const i18n = createI18n({ locale: getLanguage(), fallbackLocale: 'en', global: true, messages }) export function $t(args) { return i18n.global.tc(args) } console.log($t('login.title')) export default (app) => { app.use(i18n) }
說(shuō)明
getLanguage 函數(shù) 判斷當(dāng)前l(fā)ocalStorage是否已有選擇過(guò)語(yǔ)言如果沒(méi)有則獲取當(dāng)前瀏覽器的語(yǔ)言;
封裝 $t 函數(shù)并導(dǎo)出用在js文件中
3、 在main.js中
import language, { getLanguage, $t } from './language' language(app)
4、在vue文件中使用
<template> //1. <div class="login clamp ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}</div> //2. <el-input v-model="$t('login.title')"></el-input> </template>
如何動(dòng)態(tài)切換語(yǔ)言并更改elementUI語(yǔ)言 ?
1、利用vuex,在mutations中寫(xiě)一個(gè)方法更改element語(yǔ)言
// ----------------------- state ----------------------------- import { getLanguage } from '@/language' const state = { lang: getLanguage() } export default state // ----------------------- mutations----------------------------- import * as Types from './types' import locale from 'element-plus/lib/locale' import localeZH from 'element-plus/lib/locale/lang/zh-cn' import localeEN from 'element-plus/lib/locale/lang/en' import localePL from 'element-plus/lib/locale/lang/pl' const element = { 'zh-cn': localeZH, 'en': localeEN, 'pl': localePL } const mutations = { // 切換語(yǔ)言 [Types.SET_LANG](state, lang) { state.lang = lang localStorage.setItem('locale', lang) locale.use(element[lang]) } } export default mutations // ----------------------- types----------------------------- export const SET_LANG = 'SET_LANG'
2、使用
import * as Types from '@/store/types' import { useI18n } from "vue-i18n"; export default { setup(props,ctx) { const { locale: lang } = useI18n({ useScope: "global" }) let store = useStore() const handelLanguage = (name) => { lang.value = name store.commit(Types.SET_LANG, name) } return { handelLanguage } } }
更改完elementUI組件視圖不更新?
這時(shí)你會(huì)發(fā)現(xiàn)就算我們提交commit去更改elementUI的語(yǔ)言 頁(yè)面上也沒(méi)有發(fā)生變化,因?yàn)橐晥D組件并沒(méi)有更新,如何刷新組件使之重新加載呢?
1、 在router-view上控制視圖顯示/隱藏
// ----------------------- template----------------------------- <router-view v-if="isReloadRouter"/> // ----------------------- script----------------------------- const reload = () => { state.isReloadRouter = false nextTick(() => { state.isReloadRouter = true }) } provide("reload", reload) <-- 自行引入 provide nextTick ->
2、 在切換語(yǔ)言時(shí)調(diào)用reload
const handelLanguage = (name) => { lang.value = name store.commit(Types.SET_LANG, name) inject('reload')() }
3、需在main.js中調(diào)用一下commit,不然第一次進(jìn)入elementUI 不會(huì)更改語(yǔ)言
import language, { getLanguage, $t } from './language' import '@/styles/elementDefault.scss' store.commit(Types.SET_LANG, getLanguage())
如何全局使用 $t 函數(shù) ? 如何在js文件里使用vue-i18n ?
全局掛在 $t 函數(shù) ,在js文件里直接使用 $t 函數(shù)。
方法一:通過(guò)app.config.globalProperties掛在到全局
方法二: 通過(guò)provide、inject來(lái)實(shí)現(xiàn)
import language, { getLanguage, $t } from './language' const app = createApp(App); // ----------------------- app.config.globalProperties ----------------------------- app.config.globalProperties.$t = $t // 使用 import { getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() proxy.$t() // ----------------------- provide、inject ----------------------------- // main.js中 app.provide('$t', $t) // 使用 const $t = inject('$t') ElMessage.warning({ message: $t('login.warnMessage'), type: 'warning' });
vue3不推薦在原型鏈上掛載一些東西,而更推薦使用provide、inject,所以最好使用通過(guò)依賴(lài)和注入provide和inject的方式
在router.js中不能直接使用$t, 需自行引入該函數(shù)
import { $t } from '@/language' { path: '/mainManage/device', name: 'device', hidden: false, meta: { icon: 'circle', title: $t('router.device') }, component: () => import(/* webpackChunkName: "device" */ '@/views/mainManage/device') },
目前有一問(wèn)題:因?yàn)槲也藛握故镜淖侄稳〉氖锹酚尚畔⒗锏膖itle,router.js只在項(xiàng)目第一次進(jìn)入的時(shí)候調(diào)用,當(dāng)切換語(yǔ)言的時(shí)候菜單字段不會(huì)動(dòng)態(tài)切換,只有刷新瀏覽器才會(huì)改變,如有解決方法希望留言告知?。?!
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請(qǐng)求
這篇文章主要介紹了vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請(qǐng)求,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的詳細(xì)流程
這篇文章主要給大家介紹了關(guān)于在vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12vue前端開(kāi)發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個(gè)輔助函數(shù),所謂的輔助函數(shù)分別對(duì)State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡(jiǎn)化2021-10-10利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料,以及介紹了vue引入elementUI報(bào)錯(cuò)的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11vue如何監(jiān)聽(tīng)瀏覽器主動(dòng)刷新
這篇文章主要介紹了vue如何監(jiān)聽(tīng)瀏覽器主動(dòng)刷新,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04