Skip to content

Commit e261fbc

Browse files
PanJiaChenPanJiaChen
committed
perf[navbar]: set langSelect to component && refine errorLog component
1 parent 471c297 commit e261fbc

File tree

4 files changed

+66
-37
lines changed

4 files changed

+66
-37
lines changed

‎src/components/ErrorLog/index.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div v-if="errorLogs.length>0">
33
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
44
<el-button size="small" type="danger" class="bug-btn">
55
<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 @@
1111
</el-badge>
1212

1313
<el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
14-
<el-table :data="logsList" border>
14+
<el-table :data="errorLogs" border>
1515
<el-table-column label="Message">
1616
<template slot-scope="scope">
1717
<div>
@@ -44,15 +44,15 @@
4444
<script>
4545
export default {
4646
name: 'errorLog',
47-
props: {
48-
logsList: {
49-
type: Array
50-
}
51-
},
5247
data() {
5348
return {
5449
dialogTableVisible: false
5550
}
51+
},
52+
computed: {
53+
errorLogs() {
54+
return this.$store.getters.errorLogs
55+
}
5656
}
5757
}
5858
</script>

‎src/components/LangSelect/index.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<el-dropdown trigger="click" class='international' @command="handleSetLanguage">
3+
<div>
4+
<svg-icon class-name='international-icon' icon-class="language" />
5+
</div>
6+
<el-dropdown-menu slot="dropdown">
7+
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
8+
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
9+
</el-dropdown-menu>
10+
</el-dropdown>
11+
</template>
12+
13+
<script>
14+
export default {
15+
computed: {
16+
language() {
17+
return this.$store.getters.language
18+
}
19+
},
20+
methods: {
21+
handleSetLanguage(lang) {
22+
this.$i18n.locale = lang
23+
this.$store.dispatch('setLanguage', lang)
24+
this.$message({
25+
message: 'switch language success',
26+
type: 'success'
27+
})
28+
}
29+
}
30+
}
31+
</script>
32+
33+
<style scoped>
34+
.international-icon {
35+
font-size: 20px;
36+
cursor: pointer;
37+
vertical-align: -5px;
38+
}
39+
</style>
40+
41+

‎src/views/layout/components/Navbar.vue

Lines changed: 9 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,13 @@
55
<breadcrumb class="breadcrumb-container"></breadcrumb>
66

77
<div class="right-menu">
8-
<error-log v-if="errorLogs.length>0" class="errLog-container right-menu-item" :logsList="errorLogs"></error-log>
8+
<error-log class="errLog-container right-menu-item"></error-log>
99

1010
<el-tooltip effect="dark" content="全屏" placement="bottom">
1111
<screenfull class="screenfull right-menu-item"></screenfull>
1212
</el-tooltip>
1313

14-
<el-dropdown trigger="click" class='international' @command="handleSetLanguage">
15-
<div>
16-
<svg-icon class-name='right-menu-item international-icon' icon-class="language" />
17-
</div>
18-
<el-dropdown-menu slot="dropdown">
19-
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
20-
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
21-
</el-dropdown-menu>
22-
</el-dropdown>
14+
<lang-select class="international right-menu-item"></lang-select>
2315

2416
<el-tooltip effect="dark" content="换肤" placement="bottom">
2517
<theme-picker class="theme-switch right-menu-item"></theme-picker>
@@ -54,39 +46,31 @@
5446
import { mapGetters } from 'vuex'
5547
import Breadcrumb from '@/components/Breadcrumb'
5648
import Hamburger from '@/components/Hamburger'
57-
import ThemePicker from '@/components/ThemePicker'
58-
import Screenfull from '@/components/Screenfull'
5949
import ErrorLog from '@/components/ErrorLog'
50+
import Screenfull from '@/components/Screenfull'
51+
import LangSelect from '@/components/LangSelect'
52+
import ThemePicker from '@/components/ThemePicker'
6053
6154
export default {
6255
components: {
6356
Breadcrumb,
6457
Hamburger,
65-
ThemePicker,
6658
ErrorLog,
67-
Screenfull
59+
Screenfull,
60+
LangSelect,
61+
ThemePicker
6862
},
6963
computed: {
7064
...mapGetters([
7165
'sidebar',
7266
'name',
73-
'avatar',
74-
'language',
75-
'errorLogs'
67+
'avatar'
7668
])
7769
},
7870
methods: {
7971
toggleSideBar() {
8072
this.$store.dispatch('toggleSideBar')
8173
},
82-
handleSetLanguage(lang) {
83-
this.$i18n.locale = lang
84-
this.$store.dispatch('setLanguage', lang)
85-
this.$message({
86-
message: 'switch language success',
87-
type: 'success'
88-
})
89-
},
9074
logout() {
9175
this.$store.dispatch('LogOut').then(() => {
9276
location.reload()// 为了重新实例化vue-router对象 避免bug
@@ -129,11 +113,6 @@ export default {
129113
}
130114
.international{
131115
vertical-align: top;
132-
.international-icon{
133-
font-size: 20px;
134-
cursor: pointer;
135-
vertical-align: -5px;
136-
}
137116
}
138117
.theme-switch {
139118
vertical-align: 15px;

‎src/views/login/index.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
<div class="login-container">
33
<el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
44
<h3 class="title">系统登录</h3>
5+
<el-dropdown trigger="click" class='international' @command="handleSetLanguage">
6+
<div>
7+
<svg-icon class-name='right-menu-item international-icon' icon-class="language" />
8+
</div>
9+
<el-dropdown-menu slot="dropdown">
10+
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
11+
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
12+
</el-dropdown-menu>
13+
</el-dropdown>
514

615
<el-form-item prop="username">
716
<span class="svg-container svg-container_login">

0 commit comments

Comments
 (0)