element ui显示html,修改elementUI组件自带的提示文字并支持国际化

前言

有时候我们开发的网站需要支持国际化，这个可以使用VueI18n来解决，但是遇到要求到每一个文字都必须按照她的意思走的领导，这种时候我们就不能用组件原先的文字了，而是要换成自定义的文字。

执行方式

第一步：安装项目依赖包

cnpm install vue-i18n --save-dev

第二步：在main.js中引入

//配置语言

import ElementLocale from 'element-ui/lib/locale'import VueI18n from'vue-i18n'Vue.use(VueI18n)

const messages={'zh_CN': require('../static/lang/chinese.json'),'en_US': require('../static/lang/english.json'),

}

const i18n= newVueI18n({

locale:'en_US',

messages,

silentTranslationWarn:true})

ElementLocale.i18n((key, value)=> i18n.t(key, value));

第三步：配置对应的中文或者英文的json/js文件

注意：这里要把原先elementUI的文字也拿过来，如elementUI原本的英文语言配置：

加入到我们的json文件中：

第四步：页面中获取

$t就是直接获取数据，$tc(‘SignIn-via’,2)是json文件中的"SignIn-via": "Sign in via mobile number | Sign in via email",获取Sign in via email，下标是从1开始。

第五步：写中英文切换的方法(下面两句代码直接放到方法里即可)

this.$i18n.locale =e;

localStorage["lang"] = e;

在App.vue的created()或mounted()里面加上判断，下次直接读取缓存即可

if (this.$i18n.messages[localStorage["lang"]]) this.$i18n.locale = localStorage["lang"];

效果图