中英文切換功能，筆者是通過i8n實(shí)現(xiàn)的。本文講述了各個(gè)場(chǎng)景下的中英文如何替換，包括表單驗(yàn)證，提示信息，各中組件等。
-
安裝i18n
// 通過淘寶鏡像安裝
cnpm install vue-i18n --save
-
引入i18n
目錄結(jié)構(gòu)
- 在src目錄下創(chuàng)建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中拿到用戶的語言選擇，如果沒有，那默認(rèn)中文。
/*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)) //為了實(shí)現(xiàn)element插件的多語言切換
console.log('%c當(dāng)前緩存語言是：'+(localStorage.getItem('locale')=='en'?'English':'中文')+'','color:#fff;background:green;padding:4px;border-radius:5px');
export default i18n
- 在i18n文件夾下創(chuàng)建lang語言包，并創(chuàng)建zh.js和en.js
zh.js
const cn = {
//菜單名字
menuName:{
//首頁
home: '首頁',
product1: '產(chǎn)品1',
product2: '產(chǎn)品2',
contact: '聯(lián)系我們',
signin: '登陸',
signup: '注冊(cè)',
}
}
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/>'
})
-
實(shí)現(xiàn)中英文切換
- 在組件中定義切換事件，用戶點(diǎn)擊了切換按鈕后，將localStorage存儲(chǔ)的當(dāng)前語言更新。
//切換語言
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')
}
}
-
實(shí)現(xiàn)效果
實(shí)現(xiàn)效果
-
表單驗(yàn)證
有時(shí)候在表單驗(yàn)證的提示信息中，也要實(shí)現(xiàn)中英文切換，如果直接在rules數(shù)據(jù)定義時(shí)使用$t()數(shù)據(jù)，在中英文切換后，不會(huì)實(shí)時(shí)更新。此時(shí)就是要監(jiān)控當(dāng)前語言是否變化，如果變化了，重新賦值表單驗(yàn)證數(shù)據(jù)。
- 定義setFormRules方法
//設(shè)置表單校驗(yàn)
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時(shí)調(diào)用setFormRules方法
mounted: function(){
this.setFormRules();
}
- 語言切換后調(diào)用setFormRules方法
watch: {
//監(jiān)聽語言切換
'$i18n.locale' : function () {
this.setFormRules();
},
}
- 其它的數(shù)據(jù)類似
-
總結(jié)
本文總結(jié)了實(shí)現(xiàn)中英文切換基本步驟，以及實(shí)現(xiàn)表單驗(yàn)證提示信息的動(dòng)態(tài)切換。基本可以滿足大部分場(chǎng)景的使用。
