From e261fbcbfbb7a8caf13b072dd98c139b80273c5b Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 25 Dec 2017 14:25:55 +0800
Subject: [PATCH] perf[navbar]: set langSelect to component && refine errorLog
component
---
src/components/ErrorLog/index.vue | 14 ++++-----
src/components/LangSelect/index.vue | 41 ++++++++++++++++++++++++++
src/views/layout/components/Navbar.vue | 39 ++++++------------------
src/views/login/index.vue | 9 ++++++
4 files changed, 66 insertions(+), 37 deletions(-)
create mode 100644 src/components/LangSelect/index.vue
diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue
index e30acb3e..ac8c2aa2 100644
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div v-if="errorLogs.length>0">
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
<el-button size="small" type="danger" class="bug-btn">
<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
@@ -11,7 +11,7 @@
</el-badge>
<el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
- <el-table :data="logsList" border>
+ <el-table :data="errorLogs" border>
<el-table-column label="Message">
<template slot-scope="scope">
<div>
@@ -44,15 +44,15 @@
<script>
export default {
name: 'errorLog',
- props: {
- logsList: {
- type: Array
- }
- },
data() {
return {
dialogTableVisible: false
}
+ },
+ computed: {
+ errorLogs() {
+ return this.$store.getters.errorLogs
+ }
}
}
</script>
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
new file mode 100644
index 00000000..608b126a
--- /dev/null
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,41 @@
+<template>
+ <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+ <div>
+ <svg-icon class-name='international-icon' icon-class="language" />
+ </div>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="zh" :disabled="language==='zh'">ä¸æ–‡</el-dropdown-item>
+ <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+</template>
+
+<script>
+export default {
+ computed: {
+ language() {
+ return this.$store.getters.language
+ }
+ },
+ methods: {
+ handleSetLanguage(lang) {
+ this.$i18n.locale = lang
+ this.$store.dispatch('setLanguage', lang)
+ this.$message({
+ message: 'switch language success',
+ type: 'success'
+ })
+ }
+ }
+}
+</script>
+
+<style scoped>
+.international-icon {
+ font-size: 20px;
+ cursor: pointer;
+ vertical-align: -5px;
+}
+</style>
+
+
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index b5ba99b4..dd8cf835 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -5,21 +5,13 @@
<breadcrumb class="breadcrumb-container"></breadcrumb>
<div class="right-menu">
- <error-log v-if="errorLogs.length>0" class="errLog-container right-menu-item" :logsList="errorLogs"></error-log>
+ <error-log class="errLog-container right-menu-item"></error-log>
<el-tooltip effect="dark" content="å…¨å±" placement="bottom">
<screenfull class="screenfull right-menu-item"></screenfull>
</el-tooltip>
- <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
- <div>
- <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
- </div>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="zh" :disabled="language==='zh'">ä¸æ–‡</el-dropdown-item>
- <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
+ <lang-select class="international right-menu-item"></lang-select>
<el-tooltip effect="dark" content="æ¢è‚¤" placement="bottom">
<theme-picker class="theme-switch right-menu-item"></theme-picker>
@@ -54,39 +46,31 @@
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
-import ThemePicker from '@/components/ThemePicker'
-import Screenfull from '@/components/Screenfull'
import ErrorLog from '@/components/ErrorLog'
+import Screenfull from '@/components/Screenfull'
+import LangSelect from '@/components/LangSelect'
+import ThemePicker from '@/components/ThemePicker'
export default {
components: {
Breadcrumb,
Hamburger,
- ThemePicker,
ErrorLog,
- Screenfull
+ Screenfull,
+ LangSelect,
+ ThemePicker
},
computed: {
...mapGetters([
'sidebar',
'name',
- 'avatar',
- 'language',
- 'errorLogs'
+ 'avatar'
])
},
methods: {
toggleSideBar() {
this.$store.dispatch('toggleSideBar')
},
- handleSetLanguage(lang) {
- this.$i18n.locale = lang
- this.$store.dispatch('setLanguage', lang)
- this.$message({
- message: 'switch language success',
- type: 'success'
- })
- },
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()// 为了é‡æ–°å®žä¾‹åŒ–vue-router对象 é¿å…bug
@@ -129,11 +113,6 @@ export default {
}
.international{
vertical-align: top;
- .international-icon{
- font-size: 20px;
- cursor: pointer;
- vertical-align: -5px;
- }
}
.theme-switch {
vertical-align: 15px;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 38c1c687..1a74c0d7 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -2,6 +2,15 @@
<div class="login-container">
<el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<h3 class="title">系统登录</h3>
+ <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+ <div>
+ <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
+ </div>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="zh" :disabled="language==='zh'">ä¸æ–‡</el-dropdown-item>
+ <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
--
GitLab