perf: login也支持国际化

This commit is contained in:
陈劲松
2020-03-12 18:04:04 +08:00
parent 2d4f870274
commit 43d3117b0a
4 changed files with 19 additions and 4 deletions

View File

@@ -382,6 +382,7 @@
changeLocal(lang) { changeLocal(lang) {
if (lang != localStorage.getItem("nz-language-" + this.username)) { if (lang != localStorage.getItem("nz-language-" + this.username)) {
localStorage.setItem("nz-language-" + this.username, lang); localStorage.setItem("nz-language-" + this.username, lang);
localStorage.setItem("nz-language", lang);
this.$i18n.locale = lang; this.$i18n.locale = lang;
window.location.reload(); window.location.reload();
} }

View File

@@ -48,6 +48,11 @@ const cn = {
downloadButtonTitle:'下载', downloadButtonTitle:'下载',
filePath:'文件路径', filePath:'文件路径',
}, },
login: {
username: '登录名',
password: '密码',
login: '登录'
},
dashboard:{ dashboard:{
title:'仪表盘', title:'仪表盘',
panel:{ panel:{

View File

@@ -75,6 +75,11 @@ const en = {
downloadButtonTitle:'Download', downloadButtonTitle:'Download',
filePath:'file path', filePath:'file path',
}, },
login: {
username: 'Username',
password: 'Password',
login: 'Login'
},
dashboard:{ dashboard:{
title:'Dashboard', title:'Dashboard',
panel:{ panel:{

View File

@@ -6,15 +6,15 @@
<div class="login-label"></div> <div class="login-label"></div>
<div class="login-input"> <div class="login-input">
<i class="nz-icon nz-icon-user"></i> <i class="nz-icon nz-icon-user"></i>
<input v-model="loginData.username" autocomplete="new-password" placeholder="Username"></input> <input v-model="loginData.username" autocomplete="new-password" :placeholder="$t('login.username')"></input>
</div> </div>
<div class="login-label"></div> <div class="login-label"></div>
<div class="login-input"> <div class="login-input">
<i class="nz-icon nz-icon-password"></i> <i class="nz-icon nz-icon-password"></i>
<input v-model="loginData.password" type="password" autocomplete="new-password" placeholder="Password"></input> <input v-model="loginData.password" type="password" autocomplete="new-password" :placeholder="$t('login.password')"></input>
</div> </div>
<div class="login-foot"> <div class="login-foot">
<button @click="login" class="login-btn" id="login">Login</button> <button @click="login" class="login-btn" id="login">{{$t("login.login")}}</button>
<div class="login-foot-lang" @click.stop="langListShow = !langListShow"> <div class="login-foot-lang" @click.stop="langListShow = !langListShow">
<i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i> <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>
<i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i> <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>
@@ -40,7 +40,7 @@ export default {
password: '', password: '',
remember: false remember: false
}, },
lang: 'en', //en/cn lang: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', //en/cn
langListShow: false, langListShow: false,
} }
}, },
@@ -71,6 +71,8 @@ export default {
changeLang(lang) { changeLang(lang) {
this.lang = lang; this.lang = lang;
this.langListShow = false; this.langListShow = false;
this.$i18n.locale = this.lang;
localStorage.setItem('nz-language', this.lang);
}, },
validateLogin() { validateLogin() {
if (!this.loginData.username || !this.loginData.password) { if (!this.loginData.username || !this.loginData.password) {
@@ -86,11 +88,13 @@ export default {
let lang = localStorage.getItem('nz-language-' + n); let lang = localStorage.getItem('nz-language-' + n);
if (lang) { if (lang) {
this.lang = lang; this.lang = lang;
this.$i18n.locale = this.lang;
} }
} }
}, },
mounted() { mounted() {
const _this = this; const _this = this;
this.$i18n.locale = this.lang;
document.onkeydown = function(e) { document.onkeydown = function(e) {
if(e.key === 'Enter'){ if(e.key === 'Enter'){
_this.login(); _this.login();