欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-i18n结合Element-ui的配置方法

程序员文章站 2023-12-15 20:57:28
使用方法: 在配合 element-ui 一起使用时,会有2个问题: ####(1)、页面刷新后,通过按钮切换的语言还原成了最初的语言,无法保存 ####(2)、框架内部...

使用方法:

在配合 element-ui 一起使用时,会有2个问题: ####(1)、页面刷新后,通过按钮切换的语言还原成了最初的语言,无法保存 ####(2)、框架内部自带的提示文字无法更改,比如像时间选择框内部中的提示文字

关于第一个问题,可以在初始化vuei18n实例时,通过 localstorage 来为 locale 对象赋值

在切换语言的时候可以缓存不同的语言选项,并且可以长期保存,不会因为刷新网页而改变locale 的属性值

const i18n = new vuei18n({ locale: localstorage.getitem('locale') || 'zh', messages })

关于第二个问题,更改element 组件内部语言,这里还涉及到 手动处理 兼容性问题。 ... 官网已经做了详细介绍,这里依葫芦画瓢跟着实现一下

 ###i18n.js import vue from 'vue' import vuei18n from 'vue-i18n' import locale from 'element-ui/lib/locale'; import zh from './langs/zh' import en from './langs/en' import enlocale from 'element-ui/lib/locale/lang/en' import zhlocale from 'element-ui/lib/locale/lang/zh-cn'
vue.use(vuei18n)
const messages = { en: object.assign(en, enlocale), zh: object.assign(zh, zhlocale) }
console.log(messages.zh)
const i18n = new vuei18n({ locale: localstorage.getitem('locale') || 'zh', messages })
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
export default i18n

按照如上把国际化文件都整合到一起,避免main.js 中大段引入相关代码。main.js 中与 i18n 相关的就只剩两行代码

###main.js import i18n from './i18n/i18n' // 1行
window.app = new vue({ el: '#app', router, store, i18n, // 2行 components: { app }, template: '' })

---------------------------源码如下--------------------------------------

// 工程本地 国际化
import locale_zh_cn from './lang/zh-cn'
import locale_zh_tw from './lang/zh-tw'
import locale_en_us from './lang/en-us'
import locale_ko_kr from './lang/ko-kr'
// elementui 国际化
import element_locale from 'element-ui/lib/locale'
import element_zh_cn from 'element-ui/lib/locale/lang/zh-cn'
import element_zh_tw from 'element-ui/lib/locale/lang/zh-tw'
import element_en_us from 'element-ui/lib/locale/lang/en'
import element_ko_kr from 'element-ui/lib/locale/lang/ko'
import vue from 'vue'
import vuei18n from 'vue-i18n'
vue.use(vuei18n)
// 将各自的 国际化文件合并 抛出 (后期公共组件等插件的 国际化文件也需要考虑)
const messages = {
zh_cn: object.assign(locale_zh_cn, element_zh_cn),
zh_tw: object.assign(locale_zh_tw, element_zh_tw),
en_us: object.assign(locale_en_us, element_en_us),
ko_kr: object.assign(locale_ko_kr, element_ko_kr)
}
// i18n插件默认给中文
const i18n = new vuei18n({
locale: window.localstorage.getitem('webfront_lang') || 'zh_cn',
messages
})
// 为了实现element插件的多语言切换
element_locale.i18n((key, value) => i18n.t(key, value))
export default i18n

总结

以上所述是小编给大家介绍的vue-i18n结合element-ui的配置方法,希望对大家有所帮助

上一篇:

下一篇: