vue-i18n和Element国际化使用
vue-i18n版本为6.x 与 elementUI有冲突,以下是解决办法。
1.npm install –save vue-i18n
2、引用 –为了方便后去优化,单独新建一个i18n.js文件
import Vue from 'vue'
import VueI18n from 'vue-i18n'
/*element ui国际化*/
import locale from 'element-ui/lib/locale'
import messages from './yuyan' //多语言文字入口
Vue.use(VueI18n)
let langNow;
if (localStorage.lang) {
langNow = localStorage.lang;
} else {
localStorage.lang = 'en';
langNow = 'en';
}
const i18n = new VueI18n({
locale: langNow,
messages,
})
locale.i18n((key, value) => i18n.t(key, value))//为了实现element插件的多语言切换
export default i18n
3、duoyu文件夹的代码:
index.js
import en from './en'
import zh from './zh'
export default {
en: en,
zh: zh,
}
4、下面仅用 en.js做展示,enLocale是elementUi的多语言文件,通过…enLocale进行解析,与我们自己搭建的en.js进行合并
import enLocale from 'element-ui/lib/locale/lang/en'
export default {
"lang": "en",
"pages": {
"changelog": {
"1": "Changelog",
"2": "en-US"
}
},
duoyu: {
message: {
hello: 'hello world',
},
},
...enLocale
}
5、调用–在main.js里面引入
import i18n from './i18n'
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app');
6、在vue文件里面的实现
// <p></p>
在js代码里面调用多语言字段
this.$t('duoyu.message.hello')
语言切换动作
localStorage.lang = this.lang;
this.$i18n.locale = this.lang
调用
list.vue
<template>
<div>
<el-button type="primary" @click="handleBuild" :bind="$t('name')">$t('home')</el-button>
<el-table-column prop="status" :label="$t('name')" min-width="100">
<template scope="scope">
<p :class="scope.row.status == 1?'success':'danger'">scope.row.status | statusChange($i18n)</p>
</template>
</el-table-column>
</div>
</template>
<script type="text/javascript">
export default{
data:function(){
return {
list:[]
}
},
filters: {
statusChange(val,type) {
var status='';
switch(parseFloat(val)){
case -1:
status=type.t('status-1');
break;
case 0:
status=type.t('status0');
break;
case 1:
status=type.t('status1');
break;
}
return status;
},
}
}
</script>