实现elementUI多语言切换

整体目录

根据自己的需要加载表情包，不需要在页面上手动切换
使用 i18n 手动切换语言

根据自己的需要加载表情包，不需要在页面上手动切换

// 在main.js中引入并设置// import locale from "element-ui/lib/locale/lang/zh-CN";
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale, size: 'small' })

使用 i18n 手动切换语言

安装相关依赖
npm install vue vue-i18n --save - 注意两者版本匹配问题，不然安装报错

在 src 目录下创建 lang 文件夹（包含不同的语言包：zh.js\en.js…\index.js）。各个文件的内容如下：

//zh.js
export default {item: {username: '用户名',password: '密码',email: '邮箱',},
}

//en.js
export default {item: {username: 'Username',password: 'Password',email: 'Email',},
}

//index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
import elementLocal from 'element-ui/lib/locale'import enLocale from './en'
import zhLocale from './zh'Vue.use(VueI18n)const messages = {en: {...enLocale,...elementEnLocale,},zh: {...zhLocale,...elementZhLocale,},
}const i18n = new VueI18n({locale: localStorage.getItem('language') || 'zh',messages,
})
elementLocal.i18n((key, value) => i18n.t(key, value))export default i18n

在 src/store 中设置 language 的相关信息

//src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {language: localStorage.getItem('language') || 'zh',},mutations: {SET_LANGUAGE: (state, language) => {state.language = languagelocalStorage.setItem('language', language)},},actions: {setLanguage({ commit }, language) {commit('SET_LANGUAGE', language)},},getters: {language: (state) => {return state.language},},
})

在页面中应用完成语言的切换

<template><div><el-dropdown trigger="click" @command="handleSetLanguage"><div>选择语言</div><el-dropdown-menu slot="dropdown"><el-dropdown-item :disabled="language === 'zh'" command="zh">中文</el-dropdown-item><el-dropdown-item :disabled="language === 'en'" command="en">English</el-dropdown-item></el-dropdown-menu></el-dropdown><div><p>用户：{{ $t('item.username') }}</p><p>密码：{{ $t('item.password') }}</p><p>邮箱：{{ $t('item.email') }}</p></div></div>
</template>
<script>export default {name: 'Lang',data() {return {dateTime: '',}},computed: {language() {return this.$store.getters.language},},methods: {handleSetLanguage(lang) {this.$i18n.locale = langthis.$store.dispatch('setLanguage', lang)},},}
</script>

实现elementUI多语言切换相关推荐

【vue-element-admin】4.x 添加 i18n 国际化多语言切换
花裤衩前辈的vue-element-admin模块在4.x的大版本中去除了对i18n国际化的支持,本次因项目需要,在一个基于 vue-element-admin V4.2.1 版本模板开发的项目中,需 ...
使用vue-i18n切换中英文-网页语言切换案例-vue文件中或路由(Router)文件中使用
vue-i18n地址安装 npm install vue-i18n 使用在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue- ...
网页中英文语言切换解决方案
网页中英文语言切换解决方案参考文章: (1)网页中英文语言切换解决方案 (2)https://www.cnblogs.com/seasons1987/archive/2012/10/09/27163 ...
Java Web的Struts2的多语种网站的多语言切换实例
先看图图: 图1: 图2: 图3: 图4: 一首先下载Properties Editor插件,该插件是支持中文的资源文件编辑器:MyEclipse 10.6 以上不用安装该插件,使用自带资源文件编辑 ...
html怎么实现多语言图片切换,JavaScript实现--中英语言切换功能
最近弄的项目是面向国际的,所以老总说要有语言切换功能.第一感觉好像不难吧网上查了下,感觉实现方法就2种: 一:2个版本的HTML.至于怎么切换,方法也很多. 不过这种方法,除了笨,我实在不知道用什么 ...
安卓换语言java_Android应用程序的语言切换
最近项目中用用到语言切换功能,第一想到的就是资源文件,没错. 在资源文件中新建一个文件夹values-en,在里面新建一个strings.xml,把默认values文件夹中的strings.xml中的 ...
qml中loader加载页面会闪屏_Qml动态语言切换
此方法需要在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现重要的事情说三遍首先在工程文件.pro中加入TRANSLATIONS = zh_CN.ts ...
WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换
WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换独立观察员 2021 年 8 月 23 日我们平常在 WPF 中进行资源绑定操作,一般就是用 Stat ...
Delphi XE2 之 FireMonkey 入门(18) - TLang(多语言切换的实现)
一个小小的 TLang 类, 实现多语言切换, 挺好的. 它的工作思路是: 1.首先通过 AddLang('语言代码') 添加语言类别, 如: AddLang('en').AddLang('cn'). ...
mfc oninitdialog 中的hwnd == null_在SOUI中使用动态多语言切换
动态语言切换是很多国际化产品的需求,SOUI之前的版本支持静态多语言翻译,通过在程序启动时设置好语言翻译模块,在程序中打开的UI都会自动调用该翻译模块进行文字翻译,但是不支持运行进语言切换. 最近几个 ...

实现elementUI多语言切换

整体目录

根据自己的需要加载表情包，不需要在页面上手动切换

使用 i18n 手动切换语言

实现elementUI多语言切换相关推荐

最新文章

热门文章