中英文切换功能，笔者是通过i8n实现的。本文讲述了各个场景下的中英文如何替换，包括表单验证，提示信息，各中组件等。
-
安装i18n
// 通过淘宝镜像安装
cnpm install vue-i18n --save
-
引入i18n
目录结构
- 在src目录下创建i18n文件夹，新增i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
//import messages from './langs'
//自定义中英文包
import zh from './langs/zh'
import en from './langs/en'
//element 中英文包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const messages = {
en: Object.assign(en, enLocale),
zh: Object.assign(zh, zhLocale)
}
//从localStorage中拿到用户的语言选择，如果没有，那默认中文。
/*const i18n = new VueI18n({
locale: localStorage.lang || 'zh',
messages,
})*/
const i18n = new VueI18n({
locale: localStorage.getItem('locale') || 'zh',
messages
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
console.log('%c当前缓存语言是：'+(localStorage.getItem('locale')=='en'?'English':'中文')+'','color:#fff;background:green;padding:4px;border-radius:5px');
export default i18n
- 在i18n文件夹下创建lang语言包，并创建zh.js和en.js
zh.js
const cn = {
//菜单名字
menuName:{
//首页
home: '首页',
product1: '产品1',
product2: '产品2',
contact: '联系我们',
signin: '登陆',
signup: '注册',
}
}
export default cn;
en.js
const en = {
//菜单名字
menuName:{
//首页
home: 'home',
product1: 'product1',
product2: 'product2',
contact: 'contact',
signin: 'signin',
signup: 'signup',
}
}
export default en;
- 在main.js中引入i18n
//中英文切换
import i18n from './i18n/i18n'
new Vue({
el: '#app',
router,
i18n,
store,
components: { App },
template: '<App/>'
})
-
实现中英文切换
- 在组件中定义切换事件，用户点击了切换按钮后，将localStorage存储的当前语言更新。
//切换语言
toggleLang(lang) {
// loading遮罩
const loading = this.$loading({
lock: true,
text: this.$t("element.loadingText"),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(function(){
loading.close();
},600)
if(lang == 'zh') {//中文
localStorage.setItem('locale', 'zh')
this.$i18n.locale = localStorage.getItem('locale')
} else if(lang == 'en') {//英文
localStorage.setItem('locale', 'en')
this.$i18n.locale = localStorage.getItem('locale')
}
}
-
实现效果
实现效果
-
表单验证
有时候在表单验证的提示信息中，也要实现中英文切换，如果直接在rules数据定义时使用$t()数据，在中英文切换后，不会实时更新。此时就是要监控当前语言是否变化，如果变化了，重新赋值表单验证数据。
- 定义setFormRules方法
//设置表单校验
setFormRules: function(){
this.rules = {
email: [
{required: true, message: this.$t('userForm.emailRule'), trigger: 'blur'},
{type: 'email', message: this.$t('userForm.emailCheckRule') , trigger: 'blur'},
{min: 3, max: 50, message: this.$t('userForm.emailCheckRule'), trigger: 'blur'}
],
password: [
{required: true, message: this.$t('userForm.passwordRule'), trigger: 'blur'},
],
vrifyCode: [
{required: true, message: this.$t('signInRules.vrifyCodeRule') , trigger: 'blur,change'},
{min: 4, max: 4, message: this.$t('signInRules.vrifyCodeCheckRule'), trigger: 'blur'}
],
}
}
- 组件mounted时调用setFormRules方法
mounted: function(){
this.setFormRules();
}
- 语言切换后调用setFormRules方法
watch: {
//监听语言切换
'$i18n.locale' : function () {
this.setFormRules();
},
}
- 其它的数据类似
-
总结
本文总结了实现中英文切换基本步骤，以及实现表单验证提示信息的动态切换。基本可以满足大部分场景的使用。
