Vue-使用i18n实现中英文切换功能，表单验证，组件数据等

中英文切换功能，笔者是通过i8n实现的。本文讲述了各个场景下的中英文如何替换，包括表单验证，提示信息，各中组件等。

• 安装i18n

// 通过淘宝镜像安装
cnpm install vue-i18n --save

• 引入i18n

目录结构

1. 在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

2. 在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;

3. 在main.js中引入i18n

//中英文切换
import i18n from './i18n/i18n'


new Vue({
  el: '#app',
  router,
  i18n,
  store,
  components: { App },
  template: '<App/>'
})

• 实现中英文切换

1. 在组件中定义切换事件，用户点击了切换按钮后，将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()数据，在中英文切换后，不会实时更新。此时就是要监控当前语言是否变化，如果变化了，重新赋值表单验证数据。

1. 定义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'}
      ],
    }
  }

2. 组件mounted时调用setFormRules方法

 mounted: function(){
          this.setFormRules();
        }

3. 语言切换后调用setFormRules方法

 watch: {
          //监听语言切换
          '$i18n.locale' : function () {
            this.setFormRules();
          },
        }

4. 其它的数据类似

• 总结

本文总结了实现中英文切换基本步骤，以及实现表单验证提示信息的动态切换。基本可以满足大部分场景的使用。