Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
cdb704d2 1 parent 0621a2f7

菜单状态变更

Inline Side-by-side
Showing 1 changed file with 17 additions and 15 deletions
1 <template> 1 <template>
2 <div id="tags-view-container" class="tags-view-container"> 2 <div id="tags-view-container" class="tags-view-container">
3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> 3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
4 - <router-link 4 + <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
5 - v-for="tag in visitedViews" 5 + :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
6 - ref="tag" 6 + :style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
7 - :key="tag.path" 7 + @contextmenu.prevent.native="openMenu(tag, $event)">
8 - :class="isActive(tag)?'active':''"
9 - :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
10 - tag="span"
11 - class="tags-view-item"
12 - :style="activeStyle(tag)"
13 - @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
14 - @contextmenu.prevent.native="openMenu(tag,$event)"
15 - >
16 {{ tag.title }} 8 {{ tag.title }}
17 - <span v-if="tag.name != 'FlightAllocConfigAdd' && tag.name != 'FlightAllocConfigInfo' && !isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> 9 + <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
18 </router-link> 10 </router-link>
19 </scroll-pane> 11 </scroll-pane>
20 - <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> 12 + <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
21 <li @click="refreshSelectedTag(selectedTag)">刷新页面</li> 13 <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
22 <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li> 14 <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
23 <li @click="closeOthersTags">关闭其他</li> 15 <li @click="closeOthersTags">关闭其他</li>
...@@ -168,7 +160,7 @@ export default { ...@@ -168,7 +160,7 @@ export default {
168 }) 160 })
169 }, 161 },
170 closeOthersTags() { 162 closeOthersTags() {
171 - this.$router.push(this.selectedTag).catch(()=>{}); 163 + this.$router.push(this.selectedTag).catch(() => { });
172 this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { 164 this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
173 this.moveToCurrentTag() 165 this.moveToCurrentTag()
174 }) 166 })
...@@ -230,6 +222,7 @@ export default { ...@@ -230,6 +222,7 @@ export default {
230 background: #fff; 222 background: #fff;
231 border-bottom: 1px solid #d8dce5; 223 border-bottom: 1px solid #d8dce5;
232 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); 224 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
225 +
233 .tags-view-wrapper { 226 .tags-view-wrapper {
234 .tags-view-item { 227 .tags-view-item {
235 display: inline-block; 228 display: inline-block;
...@@ -243,17 +236,21 @@ export default { ...@@ -243,17 +236,21 @@ export default {
243 padding: 0 8px; 236 padding: 0 8px;
244 font-size: 12px; 237 font-size: 12px;
245 margin-left: 5px; 238 margin-left: 5px;
239 +
246 // margin-top: 4px; 240 // margin-top: 4px;
247 &:first-of-type { 241 &:first-of-type {
248 margin-left: 15px; 242 margin-left: 15px;
249 } 243 }
244 +
250 &:last-of-type { 245 &:last-of-type {
251 margin-right: 15px; 246 margin-right: 15px;
252 } 247 }
248 +
253 &.active { 249 &.active {
254 background-color: #42b983; 250 background-color: #42b983;
255 color: #fff; 251 color: #fff;
256 border-color: #42b983; 252 border-color: #42b983;
253 +
257 &::before { 254 &::before {
258 content: ''; 255 content: '';
259 background: #fff; 256 background: #fff;
...@@ -267,6 +264,7 @@ export default { ...@@ -267,6 +264,7 @@ export default {
267 } 264 }
268 } 265 }
269 } 266 }
267 +
270 .contextmenu { 268 .contextmenu {
271 // height: 0; 269 // height: 0;
272 margin: 0; 270 margin: 0;
...@@ -280,10 +278,12 @@ export default { ...@@ -280,10 +278,12 @@ export default {
280 font-weight: 400; 278 font-weight: 400;
281 color: #333; 279 color: #333;
282 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); 280 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
281 +
283 li { 282 li {
284 margin: 0; 283 margin: 0;
285 padding: 7px 16px; 284 padding: 7px 16px;
286 cursor: pointer; 285 cursor: pointer;
286 +
287 &:hover { 287 &:hover {
288 background: #eee; 288 background: #eee;
289 } 289 }
...@@ -304,11 +304,13 @@ export default { ...@@ -304,11 +304,13 @@ export default {
304 text-align: center; 304 text-align: center;
305 transition: all .3s cubic-bezier(.645, .045, .355, 1); 305 transition: all .3s cubic-bezier(.645, .045, .355, 1);
306 transform-origin: 100% 50%; 306 transform-origin: 100% 50%;
307 +
307 &:before { 308 &:before {
308 transform: scale(.6); 309 transform: scale(.6);
309 display: inline-block; 310 display: inline-block;
310 vertical-align: -3px; 311 vertical-align: -3px;
311 } 312 }
313 +
312 &:hover { 314 &:hover {
313 background-color: #b4bccc; 315 background-color: #b4bccc;
314 color: #fff; 316 color: #fff;
......