|
|
@@ -1,30 +1,38 @@
|
|
1
|
1
|
<template>
|
|
2
|
2
|
<div class="tags-view-container">
|
|
3
|
|
- <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
|
|
4
|
|
- <router-link
|
|
5
|
|
- ref='tag'
|
|
6
|
|
- class="tags-view-item"
|
|
7
|
|
- :class="isActive(tag)?'active':''"
|
|
|
3
|
+ <scroll-pane class="tags-view-wrapper" ref="scrollPane">
|
|
|
4
|
+ <router-link
|
|
|
5
|
+ ref="tag"
|
|
|
6
|
+ class="tags-view-item"
|
|
|
7
|
+ :class="isActive(tag) ? 'active' : ''"
|
|
8
|
8
|
v-for="tag in Array.from(visitedViews)"
|
|
9
|
|
- :to="tag"
|
|
10
|
|
- :key="tag.path"
|
|
11
|
|
- @contextmenu.prevent.native="openMenu(tag,$event)">
|
|
12
|
|
- {{generateTitle(tag.title)}}
|
|
13
|
|
- <span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
|
|
|
9
|
+ :to="tag"
|
|
|
10
|
+ :key="tag.path"
|
|
|
11
|
+ @contextmenu.prevent.native="openMenu(tag, $event)"
|
|
|
12
|
+ >
|
|
|
13
|
+ {{ generateTitle(tag.title) }}
|
|
|
14
|
+ <span
|
|
|
15
|
+ class="el-icon-close"
|
|
|
16
|
+ @click.prevent.stop="closeSelectedTag(tag)"
|
|
|
17
|
+ ></span>
|
|
14
|
18
|
</router-link>
|
|
15
|
19
|
</scroll-pane>
|
|
16
|
|
- <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
|
|
17
|
|
- <li @click="closeSelectedTag(selectedTag)">{{$t('tagsView.close')}}</li>
|
|
18
|
|
- <li @click="closeOthersTags">{{$t('tagsView.closeOthers')}}</li>
|
|
19
|
|
- <li @click="closeAllTags">{{$t('tagsView.closeAll')}}</li>
|
|
|
20
|
+ <ul
|
|
|
21
|
+ class="contextmenu"
|
|
|
22
|
+ v-show="visible"
|
|
|
23
|
+ :style="{ left: left + 'px', top: top + 'px' }"
|
|
|
24
|
+ >
|
|
|
25
|
+ <li @click="closeSelectedTag(selectedTag)">{{ $t("tagsView.close") }}</li>
|
|
|
26
|
+ <li @click="closeOthersTags">{{ $t("tagsView.closeOthers") }}</li>
|
|
|
27
|
+ <li @click="closeAllTags">{{ $t("tagsView.closeAll") }}</li>
|
|
20
|
28
|
</ul>
|
|
21
|
29
|
</div>
|
|
22
|
30
|
</template>
|
|
23
|
31
|
|
|
24
|
32
|
<script>
|
|
25
|
|
-import ScrollPane from '@/components/ScrollPane'
|
|
26
|
|
-import { generateTitle } from '@/utils/i18n'
|
|
27
|
|
-
|
|
|
33
|
+import ScrollPane from "@/components/ScrollPane";
|
|
|
34
|
+import { generateTitle } from "@/utils/i18n";
|
|
|
35
|
+
|
|
28
|
36
|
export default {
|
|
29
|
37
|
components: { ScrollPane },
|
|
30
|
38
|
data() {
|
|
|
@@ -33,92 +41,92 @@ export default {
|
|
33
|
41
|
top: 0,
|
|
34
|
42
|
left: 0,
|
|
35
|
43
|
selectedTag: {}
|
|
36
|
|
- }
|
|
|
44
|
+ };
|
|
37
|
45
|
},
|
|
38
|
46
|
computed: {
|
|
39
|
47
|
visitedViews() {
|
|
40
|
|
- return this.$store.state.tagsView.visitedViews
|
|
|
48
|
+ return this.$store.state.tagsView.visitedViews;
|
|
41
|
49
|
}
|
|
42
|
50
|
},
|
|
43
|
51
|
watch: {
|
|
44
|
52
|
$route() {
|
|
45
|
|
- this.addViewTags()
|
|
46
|
|
- this.moveToCurrentTag()
|
|
|
53
|
+ this.addViewTags();
|
|
|
54
|
+ this.moveToCurrentTag();
|
|
47
|
55
|
},
|
|
48
|
56
|
visible(value) {
|
|
49
|
57
|
if (value) {
|
|
50
|
|
- document.body.addEventListener('click', this.closeMenu)
|
|
|
58
|
+ document.body.addEventListener("click", this.closeMenu);
|
|
51
|
59
|
} else {
|
|
52
|
|
- document.body.removeEventListener('click', this.closeMenu)
|
|
|
60
|
+ document.body.removeEventListener("click", this.closeMenu);
|
|
53
|
61
|
}
|
|
54
|
62
|
}
|
|
55
|
63
|
},
|
|
56
|
64
|
mounted() {
|
|
57
|
|
- this.addViewTags()
|
|
|
65
|
+ this.addViewTags();
|
|
58
|
66
|
},
|
|
59
|
67
|
methods: {
|
|
60
|
68
|
generateTitle, // generateTitle by vue-i18n
|
|
61
|
69
|
generateRoute() {
|
|
62
|
70
|
if (this.$route.name) {
|
|
63
|
|
- return this.$route
|
|
|
71
|
+ return this.$route;
|
|
64
|
72
|
}
|
|
65
|
|
- return false
|
|
|
73
|
+ return false;
|
|
66
|
74
|
},
|
|
67
|
75
|
isActive(route) {
|
|
68
|
|
- return route.path === this.$route.path
|
|
|
76
|
+ return route.path === this.$route.path;
|
|
69
|
77
|
},
|
|
70
|
78
|
addViewTags() {
|
|
71
|
|
- const route = this.generateRoute()
|
|
|
79
|
+ const route = this.generateRoute();
|
|
72
|
80
|
if (!route) {
|
|
73
|
|
- return false
|
|
|
81
|
+ return false;
|
|
74
|
82
|
}
|
|
75
|
|
- this.$store.dispatch('addVisitedViews', route)
|
|
|
83
|
+ this.$store.dispatch("addVisitedViews", route);
|
|
76
|
84
|
},
|
|
77
|
85
|
moveToCurrentTag() {
|
|
78
|
|
- const tags = this.$refs.tag
|
|
|
86
|
+ const tags = this.$refs.tag;
|
|
79
|
87
|
this.$nextTick(() => {
|
|
80
|
88
|
for (const tag of tags) {
|
|
81
|
89
|
if (tag.to.path === this.$route.path) {
|
|
82
|
|
- this.$refs.scrollPane.moveToTarget(tag.$el)
|
|
83
|
|
- break
|
|
|
90
|
+ this.$refs.scrollPane.moveToTarget(tag.$el);
|
|
|
91
|
+ break;
|
|
84
|
92
|
}
|
|
85
|
93
|
}
|
|
86
|
|
- })
|
|
|
94
|
+ });
|
|
87
|
95
|
},
|
|
88
|
96
|
closeSelectedTag(view) {
|
|
89
|
|
- this.$store.dispatch('delVisitedViews', view).then((views) => {
|
|
|
97
|
+ this.$store.dispatch("delVisitedViews", view).then(views => {
|
|
90
|
98
|
if (this.isActive(view)) {
|
|
91
|
|
- const latestView = views.slice(-1)[0]
|
|
|
99
|
+ const latestView = views.slice(-1)[0];
|
|
92
|
100
|
if (latestView) {
|
|
93
|
|
- this.$router.push(latestView)
|
|
|
101
|
+ this.$router.push(latestView);
|
|
94
|
102
|
} else {
|
|
95
|
|
- this.$router.push('/')
|
|
|
103
|
+ this.$router.push("/");
|
|
96
|
104
|
}
|
|
97
|
105
|
}
|
|
98
|
|
- })
|
|
|
106
|
+ });
|
|
99
|
107
|
},
|
|
100
|
108
|
closeOthersTags() {
|
|
101
|
|
- this.$router.push(this.selectedTag)
|
|
102
|
|
- this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
|
|
103
|
|
- this.moveToCurrentTag()
|
|
104
|
|
- })
|
|
|
109
|
+ this.$router.push(this.selectedTag);
|
|
|
110
|
+ this.$store.dispatch("delOthersViews", this.selectedTag).then(() => {
|
|
|
111
|
+ this.moveToCurrentTag();
|
|
|
112
|
+ });
|
|
105
|
113
|
},
|
|
106
|
114
|
closeAllTags() {
|
|
107
|
|
- this.$store.dispatch('delAllViews')
|
|
108
|
|
- this.$router.push('/')
|
|
|
115
|
+ this.$store.dispatch("delAllViews");
|
|
|
116
|
+ this.$router.push("/");
|
|
109
|
117
|
},
|
|
110
|
118
|
openMenu(tag, e) {
|
|
111
|
|
- this.visible = true
|
|
112
|
|
- this.selectedTag = tag
|
|
113
|
|
- const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
|
|
114
|
|
- this.left = e.clientX - offsetLeft + 15 // 15: margin right
|
|
115
|
|
- this.top = e.clientY
|
|
|
119
|
+ this.visible = true;
|
|
|
120
|
+ this.selectedTag = tag;
|
|
|
121
|
+ const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
|
|
|
122
|
+ this.left = e.clientX - offsetLeft + 15; // 15: margin right
|
|
|
123
|
+ this.top = e.clientY;
|
|
116
|
124
|
},
|
|
117
|
125
|
closeMenu() {
|
|
118
|
|
- this.visible = false
|
|
|
126
|
+ this.visible = false;
|
|
119
|
127
|
}
|
|
120
|
128
|
}
|
|
121
|
|
-}
|
|
|
129
|
+};
|
|
122
|
130
|
</script>
|
|
123
|
131
|
|
|
124
|
132
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
@@ -128,7 +136,7 @@ export default {
|
|
128
|
136
|
background: #fff;
|
|
129
|
137
|
height: 50px;
|
|
130
|
138
|
border-bottom: 1px solid #d8dce5;
|
|
131
|
|
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
|
|
139
|
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
|
|
132
|
140
|
position: fixed;
|
|
133
|
141
|
z-index: 1000;
|
|
134
|
142
|
top: 60px;
|
|
|
@@ -136,43 +144,43 @@ export default {
|
|
136
|
144
|
white-space: normal;
|
|
137
|
145
|
// right: 0;
|
|
138
|
146
|
// left: 150px;
|
|
139
|
|
-
|
|
|
147
|
+
|
|
140
|
148
|
/* 针对缺省样式 (必须的) */
|
|
141
|
|
- &::-webkit-scrollbar {
|
|
142
|
|
- width: 6px;
|
|
143
|
|
- height: 2px;
|
|
144
|
|
- }
|
|
145
|
|
- /* 滚动条的滑轨背景颜色 */
|
|
146
|
|
- &::-webkit-scrollbar-track {
|
|
147
|
|
- background-color: #fff;
|
|
148
|
|
- border-radius: 3px;
|
|
149
|
|
- -moz-border-radius: 3px;
|
|
150
|
|
- -webkit-border-radius: 3px;
|
|
151
|
|
- }
|
|
152
|
|
- /* 滑块颜色 */
|
|
153
|
|
- &::-webkit-scrollbar-thumb {
|
|
154
|
|
- background: #fff;
|
|
155
|
|
- border-radius: 3px;
|
|
156
|
|
- -moz-border-radius: 3px;
|
|
157
|
|
- -webkit-border-radius: 3px;
|
|
158
|
|
- }
|
|
159
|
|
- /*内层轨道的颜色*/
|
|
160
|
|
- &::-webkit-scrollbar-track-piece {
|
|
161
|
|
- background-color: #fff;
|
|
162
|
|
- border-radius: 3px;
|
|
163
|
|
- -moz-border-radius: 3px;
|
|
164
|
|
- -webkit-border-radius: 3px;
|
|
165
|
|
- }
|
|
166
|
|
- /* 滑轨两头的监听按钮颜色 */
|
|
167
|
|
- &::-webkit-scrollbar-button {
|
|
168
|
|
- background-color: #fff;
|
|
169
|
|
- width: 0;
|
|
170
|
|
- height: 0;
|
|
171
|
|
- }
|
|
172
|
|
- /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
|
|
173
|
|
- &::-webkit-scrollbar-corner {
|
|
174
|
|
- background-color: #fff;
|
|
175
|
|
- }
|
|
|
149
|
+ &::-webkit-scrollbar {
|
|
|
150
|
+ width: 6px;
|
|
|
151
|
+ height: 2px;
|
|
|
152
|
+ }
|
|
|
153
|
+ /* 滚动条的滑轨背景颜色 */
|
|
|
154
|
+ &::-webkit-scrollbar-track {
|
|
|
155
|
+ background-color: #fff;
|
|
|
156
|
+ border-radius: 3px;
|
|
|
157
|
+ -moz-border-radius: 3px;
|
|
|
158
|
+ -webkit-border-radius: 3px;
|
|
|
159
|
+ }
|
|
|
160
|
+ /* 滑块颜色 */
|
|
|
161
|
+ &::-webkit-scrollbar-thumb {
|
|
|
162
|
+ background: #fff;
|
|
|
163
|
+ border-radius: 3px;
|
|
|
164
|
+ -moz-border-radius: 3px;
|
|
|
165
|
+ -webkit-border-radius: 3px;
|
|
|
166
|
+ }
|
|
|
167
|
+ /*内层轨道的颜色*/
|
|
|
168
|
+ &::-webkit-scrollbar-track-piece {
|
|
|
169
|
+ background-color: #fff;
|
|
|
170
|
+ border-radius: 3px;
|
|
|
171
|
+ -moz-border-radius: 3px;
|
|
|
172
|
+ -webkit-border-radius: 3px;
|
|
|
173
|
+ }
|
|
|
174
|
+ /* 滑轨两头的监听按钮颜色 */
|
|
|
175
|
+ &::-webkit-scrollbar-button {
|
|
|
176
|
+ background-color: #fff;
|
|
|
177
|
+ width: 0;
|
|
|
178
|
+ height: 0;
|
|
|
179
|
+ }
|
|
|
180
|
+ /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
|
|
|
181
|
+ &::-webkit-scrollbar-corner {
|
|
|
182
|
+ background-color: #fff;
|
|
|
183
|
+ }
|
|
176
|
184
|
.tags-view-item {
|
|
177
|
185
|
display: inline-block;
|
|
178
|
186
|
position: relative;
|
|
|
@@ -193,7 +201,7 @@ export default {
|
|
193
|
201
|
color: #fff;
|
|
194
|
202
|
border-color: #409efe;
|
|
195
|
203
|
&::before {
|
|
196
|
|
- content: '';
|
|
|
204
|
+ content: "";
|
|
197
|
205
|
background: #fff;
|
|
198
|
206
|
display: inline-block;
|
|
199
|
207
|
width: 8px;
|
|
|
@@ -216,7 +224,7 @@ export default {
|
|
216
|
224
|
font-size: 12px;
|
|
217
|
225
|
font-weight: 400;
|
|
218
|
226
|
color: #333;
|
|
219
|
|
- box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
|
|
227
|
+ box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
|
220
|
228
|
li {
|
|
221
|
229
|
margin: 0;
|
|
222
|
230
|
padding: 7px 16px;
|
|
|
@@ -227,10 +235,9 @@ export default {
|
|
227
|
235
|
}
|
|
228
|
236
|
}
|
|
229
|
237
|
}
|
|
230
|
|
-.scroll-wrapper{
|
|
231
|
|
- right: 0;
|
|
232
|
|
- position: fixed!important;
|
|
233
|
|
-
|
|
|
238
|
+.scroll-wrapper {
|
|
|
239
|
+ right: 0;
|
|
|
240
|
+ position: fixed !important;
|
|
234
|
241
|
}
|
|
235
|
242
|
</style>
|
|
236
|
243
|
|
|
|
@@ -244,10 +251,10 @@ export default {
|
|
244
|
251
|
vertical-align: 2px;
|
|
245
|
252
|
border-radius: 50%;
|
|
246
|
253
|
text-align: center;
|
|
247
|
|
- transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
|
|
254
|
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
248
|
255
|
transform-origin: 100% 50%;
|
|
249
|
256
|
&:before {
|
|
250
|
|
- transform: scale(.6);
|
|
|
257
|
+ transform: scale(0.6);
|
|
251
|
258
|
display: inline-block;
|
|
252
|
259
|
vertical-align: -3px;
|
|
253
|
260
|
}
|
