修改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 = new VueI18n({
  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"];

 

效果图