| | |
| | | <i @click="clickFold" class="el-icon-s-fold"></i> |
| | | <!-- 标签列表 --> |
| | | <div class="tag-list-container" @wheel.prevent="handleWheel"> |
| | | <div class="tag-list" v-for="tag in tagList" :key="tag.name"> |
| | | <div @click="goTag(tag)" :class="{ 'activeTag': tag.path === $route.path }"> |
| | | <div class="tag-list" v-for="tag in tagList" :key="tag.cacheKey || tag.fullPath || tag.path"> |
| | | <div @click="goTag(tag)" :class="{ 'activeTag': getTagFullPath(tag) === $route.fullPath }"> |
| | | {{ tag.meta.title }} |
| | | </div> |
| | | <i @click="closeTag(tag)" v-if="tagList.length > 1" class="el-icon-close"></i> |
| | |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | import { closeRouteView, getTagFullPath } from '@/utils/view-tabs' |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | }, |
| | | // 关闭标签 |
| | | closeTag(tag) { |
| | | this.$store.commit('SET_TAGLIST', this.tagList.filter(item => item.path !== tag.path)) |
| | | // 判断是否是当前标签 |
| | | if (tag.path === this.$route.path) { |
| | | // if (this.tagList.length > 1) { |
| | | this.$router.push(this.tagList[this.tagList.length - 1].path) |
| | | // } else { |
| | | // // this.$router.push('/welcome') |
| | | // } |
| | | } |
| | | closeRouteView({ |
| | | router: this.$router, |
| | | store: this.$store, |
| | | route: this.$route, |
| | | tag |
| | | }) |
| | | }, |
| | | // 跳转标签 |
| | | goTag(tag) { |
| | | this.$router.push({ |
| | | this.$router.push(tag.fullPath || { |
| | | path: tag.path, |
| | | query: tag.query |
| | | query: tag.query || {} |
| | | }) |
| | | }, |
| | | getTagFullPath(tag) { |
| | | return getTagFullPath(this.$router, tag) |
| | | }, |
| | | handleWheel(e) { |
| | | if (this.scrollTimer) { |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |