Skip to content

Commit 4d3bbae

Browse files
PanJiaChenPanJiaChen
committed
perf[tags-view]:refine the style && format code
1 parent b6d97f1 commit 4d3bbae

File tree

2 files changed

+168
-166
lines changed

2 files changed

+168
-166
lines changed

‎src/store/modules/tagsView.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ const tagsView = {
3030
}
3131
}
3232
},
33-
DEL_OTHER_VIEWS: (state, view) => {
33+
DEL_OTHERS_VIEWS: (state, view) => {
3434
for (const [i, v] of state.visitedViews.entries()) {
3535
if (v.path === view.path) {
36-
state.visitedViews = [].concat(state.visitedViews.slice(i, i + 1))
36+
state.visitedViews = state.visitedViews.slice(i, i + 1)
3737
break
3838
}
3939
}
4040
for (const i of state.cachedViews) {
4141
if (i === view.name) {
4242
const index = state.cachedViews.indexOf(i)
43-
state.cachedViews = [].concat(state.cachedViews.slice(index, i + 1))
43+
state.cachedViews = state.cachedViews.slice(index, i + 1)
4444
break
4545
}
4646
}
@@ -60,9 +60,9 @@ const tagsView = {
6060
resolve([...state.visitedViews])
6161
})
6262
},
63-
delOtherViews({ commit, state }, view) {
63+
delOthersViews({ commit, state }, view) {
6464
return new Promise((resolve) => {
65-
commit('DEL_OTHER_VIEWS', view)
65+
commit('DEL_OTHERS_VIEWS', view)
6666
resolve([...state.visitedViews])
6767
})
6868
},

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

Lines changed: 163 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,199 +1,201 @@
11
<template>
2-
<div class="tag-container">
3-
<scroll-pane class='tags-view-container' ref='scrollPane'>
4-
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
2+
<div class="tags-view-container">
3+
<scroll-pane class='tags-view-wrapper' ref='scrollPane'>
4+
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
55
{{generateTitle(tag.title)}}
6-
<span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
6+
<span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
77
</router-link>
88
</scroll-pane>
99
<ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
10-
<li @click="closeViewTags(selectedTag, $event)">关闭</li>
11-
<li @click="closeOtherTags">关闭其他</li>
12-
<li @click="closeAllTags">关闭所有</li>
10+
<li @click="closeSelectedTag(selectedTag)">Close</li>
11+
<li @click="closeOthersTags">Close Others</li>
12+
<li @click="closeAllTags">Close All</li>
1313
</ul>
1414
</div>
1515
</template>
1616

1717
<script>
18-
import ScrollPane from '@/components/ScrollPane'
19-
import { generateTitle } from '@/utils/i18n'
18+
import ScrollPane from '@/components/ScrollPane'
19+
import { generateTitle } from '@/utils/i18n'
2020
21-
export default {
22-
components: { ScrollPane },
23-
data() {
24-
return {
25-
visible: false,
26-
top: 0,
27-
left: 0,
28-
selectedTag: {}
29-
}
21+
export default {
22+
components: { ScrollPane },
23+
data() {
24+
return {
25+
visible: false,
26+
top: 0,
27+
left: 0,
28+
selectedTag: {}
29+
}
30+
},
31+
computed: {
32+
visitedViews() {
33+
return this.$store.state.tagsView.visitedViews
34+
}
35+
},
36+
watch: {
37+
$route() {
38+
this.addViewTags()
39+
this.moveToCurrentTag()
3040
},
31-
computed: {
32-
visitedViews() {
33-
return this.$store.state.tagsView.visitedViews
41+
visible(value) {
42+
if (value) {
43+
window.addEventListener('click', this.closeMenu)
44+
} else {
45+
window.removeEventListener('click', this.closeMenu)
46+
}
47+
}
48+
},
49+
mounted() {
50+
this.addViewTags()
51+
},
52+
methods: {
53+
generateTitle, // generateTitle by vue-i18n
54+
generateRoute() {
55+
if (this.$route.name) {
56+
return this.$route
3457
}
58+
return false
3559
},
36-
mounted() {
37-
this.addViewTags()
60+
isActive(route) {
61+
return route.path === this.$route.path || route.name === this.$route.name
3862
},
39-
methods: {
40-
generateTitle,
41-
closeViewTags(view, $event) {
42-
this.$store.dispatch('delVisitedViews', view).then((views) => {
43-
if (this.isActive(view)) {
44-
const latestView = views.slice(-1)[0]
45-
if (latestView) {
46-
this.$router.push(latestView.path)
47-
} else {
48-
this.$router.push('/')
49-
}
50-
}
51-
})
52-
$event.preventDefault()
53-
},
54-
closeOtherTags() {
55-
this.$router.push(this.selectedTag.path)
56-
this.$store.dispatch('delOtherViews', this.selectedTag)
57-
},
58-
closeAllTags() {
59-
this.$store.dispatch('delAllViews')
60-
this.$router.push('/')
61-
},
62-
generateRoute() {
63-
if (this.$route.name) {
64-
return this.$route
65-
}
63+
addViewTags() {
64+
const route = this.generateRoute()
65+
if (!route) {
6666
return false
67-
},
68-
addViewTags() {
69-
const route = this.generateRoute()
70-
if (!route) {
71-
return false
72-
}
73-
this.$store.dispatch('addVisitedViews', route)
74-
},
75-
isActive(route) {
76-
return route.path === this.$route.path || route.name === this.$route.name
77-
},
78-
moveToCurrentTag() {
79-
const tags = this.$refs.tag
80-
this.$nextTick(() => {
81-
for (const tag of tags) {
82-
if (tag.to === this.$route.path) {
83-
this.$refs.scrollPane.moveToTarget(tag.$el)
84-
break
85-
}
86-
}
87-
})
88-
},
89-
openMenu(tag, e) {
90-
this.visible = true
91-
this.selectedTag = tag
92-
this.left = e.clientX
93-
this.top = e.clientY
94-
},
95-
closeMenu() {
96-
this.visible = false
9767
}
68+
this.$store.dispatch('addVisitedViews', route)
9869
},
99-
watch: {
100-
$route() {
101-
this.addViewTags()
102-
this.moveToCurrentTag()
103-
},
104-
visible(v) {
105-
if (v) {
106-
window.addEventListener('click', this.closeMenu, false)
107-
} else {
108-
window.removeEventListener('click', this.closeMenu, false)
70+
moveToCurrentTag() {
71+
const tags = this.$refs.tag
72+
this.$nextTick(() => {
73+
for (const tag of tags) {
74+
if (tag.to === this.$route.path) {
75+
this.$refs.scrollPane.moveToTarget(tag.$el)
76+
break
77+
}
10978
}
110-
}
79+
})
80+
},
81+
closeSelectedTag(view) {
82+
this.$store.dispatch('delVisitedViews', view).then((views) => {
83+
if (this.isActive(view)) {
84+
const latestView = views.slice(-1)[0]
85+
if (latestView) {
86+
this.$router.push(latestView.path)
87+
} else {
88+
this.$router.push('/')
89+
}
90+
}
91+
})
92+
},
93+
closeOthersTags() {
94+
this.$router.push(this.selectedTag.path)
95+
this.$store.dispatch('delOthersViews', this.selectedTag)
96+
},
97+
closeAllTags() {
98+
this.$store.dispatch('delAllViews')
99+
this.$router.push('/')
100+
},
101+
openMenu(tag, e) {
102+
this.visible = true
103+
this.selectedTag = tag
104+
this.left = e.clientX
105+
this.top = e.clientY
106+
},
107+
closeMenu() {
108+
this.visible = false
111109
}
112110
}
111+
}
113112
</script>
114113

115114
<style rel="stylesheet/scss" lang="scss" scoped>
116-
.tag-container {
117-
.contextmenu {
118-
margin: 0;
115+
.tags-view-container {
116+
.tags-view-wrapper {
117+
background: #fff;
118+
height: 34px;
119+
border-bottom: 1px solid #d8dce5;
120+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
121+
.tags-view-item {
122+
display: inline-block;
123+
position: relative;
124+
height: 26px;
125+
line-height: 26px;
126+
border: 1px solid #d8dce5;
127+
color: #495060;
119128
background: #fff;
120-
z-index: 99999;
121-
position: absolute;
122-
list-style-type: none;
123-
padding-left: 0;
124-
border: 1px solid rgba(0, 0, 0, 0.4);
125-
font-size: 0.8rem;
126-
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
127-
li {
128-
margin: 0;
129-
padding: 0.2rem 1.5rem 0.3rem 0.8rem;
130-
&:hover {
131-
background: #eee;
132-
cursor: default;
129+
padding: 0 8px;
130+
font-size: 12px;
131+
margin-left: 5px;
132+
margin-top: 4px;
133+
&:first-of-type {
134+
margin-left: 15px;
135+
}
136+
&.active {
137+
background-color: #42b983;
138+
color: #fff;
139+
border-color: #42b983;
140+
&::before {
141+
content: '';
142+
background: #fff;
143+
display: inline-block;
144+
width: 8px;
145+
height: 8px;
146+
border-radius: 50%;
147+
position: relative;
148+
margin-right: 2px;
133149
}
134150
}
135151
}
136-
.tags-view-container {
137-
background: #fff;
138-
height: 34px;
139-
border-bottom: 1px solid #d8dce5;
140-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
141-
.tags-view-item {
142-
display: inline-block;
143-
position: relative;
144-
height: 26px;
145-
line-height: 26px;
146-
border: 1px solid #d8dce5;
147-
color: #495060;
148-
background: #fff;
149-
padding: 0 8px;
150-
font-size: 12px;
151-
margin-left: 5px;
152-
margin-top: 4px;
153-
&:first-of-type {
154-
margin-left: 15px;
155-
}
156-
&.active {
157-
background-color: #42b983;
158-
color: #fff;
159-
border-color: #42b983;
160-
&::before {
161-
content: '';
162-
background: #fff;
163-
display: inline-block;
164-
width: 8px;
165-
height: 8px;
166-
border-radius: 50%;
167-
position: relative;
168-
margin-right: 2px;
169-
}
170-
}
152+
}
153+
.contextmenu {
154+
margin: 0;
155+
background: #fff;
156+
z-index: 2;
157+
position: absolute;
158+
list-style-type: none;
159+
padding: 5px 0;
160+
border-radius: 4px;
161+
font-size: 12px;
162+
font-weight: 400;
163+
color: #333;
164+
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
165+
li {
166+
margin: 0;
167+
padding: 7px 16px;
168+
cursor: pointer;
169+
&:hover {
170+
background: #eee;
171171
}
172172
}
173173
}
174+
}
174175
</style>
175176

176177
<style rel="stylesheet/scss" lang="scss">
177-
.tags-view-container {
178-
.tags-view-item {
179-
.el-icon-close {
180-
width: 16px;
181-
height: 16px;
182-
vertical-align: 2px;
183-
border-radius: 50%;
184-
text-align: center;
185-
transition: all .3s cubic-bezier(.645, .045, .355, 1);
186-
transform-origin: 100% 50%;
187-
&:before {
188-
transform: scale(.6);
189-
display: inline-block;
190-
vertical-align: -3px;
191-
}
192-
&:hover {
193-
background-color: #b4bccc;
194-
color: #fff;
195-
}
178+
//reset element css of el-icon-close
179+
.tags-view-wrapper {
180+
.tags-view-item {
181+
.el-icon-close {
182+
width: 16px;
183+
height: 16px;
184+
vertical-align: 2px;
185+
border-radius: 50%;
186+
text-align: center;
187+
transition: all .3s cubic-bezier(.645, .045, .355, 1);
188+
transform-origin: 100% 50%;
189+
&:before {
190+
transform: scale(.6);
191+
display: inline-block;
192+
vertical-align: -3px;
193+
}
194+
&:hover {
195+
background-color: #b4bccc;
196+
color: #fff;
196197
}
197198
}
198199
}
200+
}
199201
</style>

0 commit comments

Comments
 (0)