需要引入 vue-i18n
npm i element-ui -S
npm install vue-i18n
index.html
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
创建目录 用于放多语言文件 重要部分 index.js 、 i18n.js
语言文件 CNS.js （中文） ENS.JS(英文) FNS.js(繁体)
CNS.JS (中文) 设置element ui 中文 引入 import zhLocalefrom 'element-ui/lib/locale/lang/zh-CN' ...zhLocale
import zhLocalefrom 'element-ui/lib/locale/lang/zh-CN'
// 用于存放 语言字段
const CNS = {
...zhLocale ,
// 登录页面
Login:{
'title':'后台管理系统', // 后台管理系统
}
ENS.js （英文）
import enLocalefrom 'element-ui/lib/locale/lang/en'
const ENS = {
...enLocale,
Login:{
'title':'Backstage Management', // 后台管理系统 System
}
index.js
import ENS from './ENS';
import CNS from './CNS';
export default {
ENS: ENS,
CNS: CNS,
}
i18n.js
import Vuefrom 'vue'
import localefrom 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.lang || 'CNS', // 设置语言 //从localStorage中拿到用户的语言选择，如果没有，那默认中文。
messages,
});
locale.i18n((key, value) => i18n.t(key, value)); //为了实现element插件的多语言切换
export default i18n
main.js
import Vuefrom 'vue'
import Appfrom './App'
// 路由
import routerfrom './router'
// 引入下载颜色主题
import storefrom '@/store/index'
// 多语言切换
import i18n from './i18n/i18n';
// 引入elementUI
import Elementfrom 'element-ui'
Vue.use(Element);
// import {locale} from "element-ui/lib/locale/lang/en"; // 多语言设置
// Vue.use(ElementUI,{locale}); // 设置组件中的语言为英文 如果只使用一种可通过这种方式
// axios api
import Apifrom './api/axios';
Vue.prototype.$api = Api;
// echarts
import echartsfrom 'echarts';
Vue.prototype.$echarts = echarts;
// 必须 创建项目后就已存在
Vue.config.productionTip= false;
new Vue({
el: '#app',
router,
store,
i18n,
components: { App},
template: ''
});
longSet.vue (当前使用的是组件) 重要代码 this.$i18n.locale = 'CNS';
<template>
<div class="sel-langs">
<el-select v-model="lang" placeholder="请选择" size="mini" @change = 'switchLang'>
<el-option v-for="iteminlangArr" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "langsSet",
props:['message'],
data() {
return {
lang: 'ENS', // 默认选中 英文
langArr: [{value: 'CNS',label: '中文' }, {value: 'ENS', label: 'English' }],
}
},
methods: {
switchLang() {
this.$emit('listenToChildEvent',this.lang);
this.$i18n.locale = this.lang;
localStorage.setItem('langs',this.lang);
},
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
},
mounted(){
var langs = localStorage.getItem('langs');
if(langs !== null){
this.lang = langs;
}else{ // 设置初始语言
this.lang = 'CNS';
}
this.$i18n.locale = this.lang;
},
}
</script>
<style scoped>
.sel-langs{ width:120px;}
.sel-langs .el-input--suffix .el-input__inner{border:none !important;}
</style>
页面引入 demo.vue
<langs-set class="sets" :message="parentMsg" v-on:listenToChildEvent = 'showMsgFromChild'></langs-set>
methods: {
// 根据选择的语言 进行控制左侧菜单
showMsgFromChild:function(data){
this.initMenuWay(data);
},
// 左侧菜单使用赋值
initMenuWay(lang){
if(lang === 'CNS'){
this.menuList = menudataFN.result; // menu json数据获取
}else if(lang === 'ENS'){
this.menuList = menudataEN.result; // menu json数据获取
}else{
this.menuList = menuDataCN.result; // menu json数据获取
}
},
}
网友评论