| | |
| | | <template> |
| | | <div id="tags-view-container" class="tags-view-container"> |
| | | <scroll-pane ref="scrollPane" class="tags-view-wrapper"> |
| | | <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> |
| | | <router-link |
| | | v-for="tag in visitedViews" |
| | | ref="tag" |
| | |
| | | :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" |
| | | tag="span" |
| | | class="tags-view-item" |
| | | :style="activeStyle(tag)" |
| | | @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''" |
| | | @contextmenu.prevent.native="openMenu(tag,$event)" |
| | | > |
| | |
| | | }, |
| | | routes() { |
| | | return this.$store.state.permission.routes |
| | | }, |
| | | theme() { |
| | | return this.$store.state.settings.theme; |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | methods: { |
| | | isActive(route) { |
| | | return route.path === this.$route.path |
| | | }, |
| | | activeStyle(tag) { |
| | | if (!this.isActive(tag)) return {}; |
| | | return { |
| | | "background-color": this.theme, |
| | | "border-color": this.theme |
| | | }; |
| | | }, |
| | | isAffix(tag) { |
| | | return tag.meta && tag.meta.affix |
| | |
| | | toLastView(visitedViews, view) { |
| | | const latestView = visitedViews.slice(-1)[0] |
| | | if (latestView) { |
| | | this.$router.push(latestView) |
| | | this.$router.push(latestView.fullPath) |
| | | } else { |
| | | // now the default is to redirect to the home page if there is no tags-view, |
| | | // you can adjust it according to your needs. |
| | |
| | | }, |
| | | closeMenu() { |
| | | this.visible = false |
| | | }, |
| | | handleScroll() { |
| | | this.closeMenu() |
| | | } |
| | | } |
| | | } |