| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | <template> |
| 懒 | 2 | <div id="tags-view-container" class="tags-view-container"> |
| 3 | <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> | |
| 4 | <router-link | |
| 5 | v-for="tag in visitedViews" | |
| 6 | ref="tag" | |
| 7 | :key="tag.path" | |
| 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 }} | |
| 17 | <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> | |
| 18 | </router-link> | |
| 19 | </scroll-pane> | |
| 20 | <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> | |
| 21 | <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li> | |
| 22 | <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li> | |
| 23 | <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li> | |
| 24 | <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li> | |
| 25 | <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li> | |
| 26 | <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li> | |
| 27 | </ul> | |
| 28 | </div> | |
| 29 | </template> | |
| 30 | ||
| 31 | <script> | |
| 32 | import ScrollPane from './ScrollPane' | |
| 33 | import path from 'path' | |
| 34 | ||
| 35 | export default { | |
| 36 | components: { ScrollPane }, | |
| 37 | data() { | |
| 38 | return { | |
| 39 | visible: false, | |
| 40 | top: 0, | |
| 41 | left: 0, | |
| 42 | selectedTag: {}, | |
| 43 | affixTags: [] | |
| 44 | } | |
| 45 | }, | |
| 46 | computed: { | |
| 47 | visitedViews() { | |
| 48 | return this.$store.state.tagsView.visitedViews | |
| 49 | }, | |
| 50 | routes() { | |
| 51 | return this.$store.state.permission.routes | |
| 52 | }, | |
| 53 | theme() { | |
| 54 | return this.$store.state.settings.theme; | |
| 55 | } | |
| 56 | }, | |
| 57 | watch: { | |
| 58 | $route() { | |
| 59 | this.addTags() | |
| 60 | this.moveToCurrentTag() | |
| 61 | }, | |
| 62 | visible(value) { | |
| 63 | if (value) { | |
| 64 | document.body.addEventListener('click', this.closeMenu) | |
| 65 | } else { | |
| 66 | document.body.removeEventListener('click', this.closeMenu) | |
| 67 | } | |
| 68 | } | |
| 69 | }, | |
| 70 | mounted() { | |
| 71 | this.initTags() | |
| 72 | this.addTags() | |
| 73 | }, | |
| 74 | methods: { | |
| 75 | isActive(route) { | |
| 76 | return route.path === this.$route.path | |
| 77 | }, | |
| 78 | activeStyle(tag) { | |
| 79 | if (!this.isActive(tag)) return {}; | |
| 80 | return { | |
| 81 | "background-color": this.theme, | |
| 82 | "border-color": this.theme | |
| 83 | }; | |
| 84 | }, | |
| 85 | isAffix(tag) { | |
| 86 | return tag.meta && tag.meta.affix | |
| 87 | }, | |
| 88 | isFirstView() { | |
| 89 | try { | |
| 90 | return this.selectedTag.fullPath === '/index' || this.selectedTag.fullPath === this.visitedViews[1].fullPath | |
| 91 | } catch (err) { | |
| 92 | return false | |
| 93 | } | |
| 94 | }, | |
| 95 | isLastView() { | |
| 96 | try { | |
| 97 | return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath | |
| 98 | } catch (err) { | |
| 99 | return false | |
| 100 | } | |
| 101 | }, | |
| 102 | filterAffixTags(routes, basePath = '/') { | |
| 103 | let tags = [] | |
| 104 | routes.forEach(route => { | |
| 105 | if (route.meta && route.meta.affix) { | |
| 106 | const tagPath = path.resolve(basePath, route.path) | |
| 107 | tags.push({ | |
| 108 | fullPath: tagPath, | |
| 109 | path: tagPath, | |
| 110 | name: route.name, | |
| 111 | meta: { ...route.meta } | |
| 112 | }) | |
| 113 | } | |
| 114 | if (route.children) { | |
| 115 | const tempTags = this.filterAffixTags(route.children, route.path) | |
| 116 | if (tempTags.length >= 1) { | |
| 117 | tags = [...tags, ...tempTags] | |
| 118 | } | |
| 119 | } | |
| 120 | }) | |
| 121 | return tags | |
| 122 | }, | |
| 123 | initTags() { | |
| 124 | const affixTags = this.affixTags = this.filterAffixTags(this.routes) | |
| 125 | for (const tag of affixTags) { | |
| 126 | // Must have tag name | |
| 127 | if (tag.name) { | |
| 128 | this.$store.dispatch('tagsView/addVisitedView', tag) | |
| 129 | } | |
| 130 | } | |
| 131 | }, | |
| 132 | addTags() { | |
| 133 | const { name } = this.$route | |
| 134 | if (name) { | |
| 135 | this.$store.dispatch('tagsView/addView', this.$route) | |
| 136 | if (this.$route.meta.link) { | |
| 137 | this.$store.dispatch('tagsView/addIframeView', this.$route) | |
| 138 | } | |
| 139 | } | |
| 140 | return false | |
| 141 | }, | |
| 142 | moveToCurrentTag() { | |
| 143 | const tags = this.$refs.tag | |
| 144 | this.$nextTick(() => { | |
| 145 | for (const tag of tags) { | |
| 146 | if (tag.to.path === this.$route.path) { | |
| 147 | this.$refs.scrollPane.moveToTarget(tag) | |
| 148 | // when query is different then update | |
| 149 | if (tag.to.fullPath !== this.$route.fullPath) { | |
| 150 | this.$store.dispatch('tagsView/updateVisitedView', this.$route) | |
| 151 | } | |
| 152 | break | |
| 153 | } | |
| 154 | } | |
| 155 | }) | |
| 156 | }, | |
| 157 | refreshSelectedTag(view) { | |
| 158 | this.$tab.refreshPage(view); | |
| 159 | if (this.$route.meta.link) { | |
| 160 | this.$store.dispatch('tagsView/delIframeView', this.$route) | |
| 161 | } | |
| 162 | }, | |
| 163 | closeSelectedTag(view) { | |
| 164 | this.$tab.closePage(view).then(({ visitedViews }) => { | |
| 165 | if (this.isActive(view)) { | |
| 166 | this.toLastView(visitedViews, view) | |
| 167 | } | |
| 168 | }) | |
| 169 | }, | |
| 170 | closeRightTags() { | |
| 171 | this.$tab.closeRightPage(this.selectedTag).then(visitedViews => { | |
| 172 | if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) { | |
| 173 | this.toLastView(visitedViews) | |
| 174 | } | |
| 175 | }) | |
| 176 | }, | |
| 177 | closeLeftTags() { | |
| 178 | this.$tab.closeLeftPage(this.selectedTag).then(visitedViews => { | |
| 179 | if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) { | |
| 180 | this.toLastView(visitedViews) | |
| 181 | } | |
| 182 | }) | |
| 183 | }, | |
| 184 | closeOthersTags() { | |
| 185 | this.$router.push(this.selectedTag.fullPath).catch(()=>{}); | |
| 186 | this.$tab.closeOtherPage(this.selectedTag).then(() => { | |
| 187 | this.moveToCurrentTag() | |
| 188 | }) | |
| 189 | }, | |
| 190 | closeAllTags(view) { | |
| 191 | this.$tab.closeAllPage().then(({ visitedViews }) => { | |
| 192 | if (this.affixTags.some(tag => tag.path === this.$route.path)) { | |
| 193 | return | |
| 194 | } | |
| 195 | this.toLastView(visitedViews, view) | |
| 196 | }) | |
| 197 | }, | |
| 198 | toLastView(visitedViews, view) { | |
| 199 | const latestView = visitedViews.slice(-1)[0] | |
| 200 | if (latestView) { | |
| 201 | this.$router.push(latestView.fullPath) | |
| 202 | } else { | |
| 203 | // now the default is to redirect to the home page if there is no tags-view, | |
| 204 | // you can adjust it according to your needs. | |
| 205 | if (view.name === 'Dashboard') { | |
| 206 | // to reload home page | |
| 207 | this.$router.replace({ path: '/redirect' + view.fullPath }) | |
| 208 | } else { | |
| 209 | this.$router.push('/') | |
| 210 | } | |
| 211 | } | |
| 212 | }, | |
| 213 | openMenu(tag, e) { | |
| 214 | const menuMinWidth = 105 | |
| 215 | const offsetLeft = this.$el.getBoundingClientRect().left // container margin left | |
| 216 | const offsetWidth = this.$el.offsetWidth // container width | |
| 217 | const maxLeft = offsetWidth - menuMinWidth // left boundary | |
| 218 | const left = e.clientX - offsetLeft + 15 // 15: margin right | |
| 219 | ||
| 220 | if (left > maxLeft) { | |
| 221 | this.left = maxLeft | |
| 222 | } else { | |
| 223 | this.left = left | |
| 224 | } | |
| 225 | ||
| 226 | this.top = e.clientY | |
| 227 | this.visible = true | |
| 228 | this.selectedTag = tag | |
| 229 | }, | |
| 230 | closeMenu() { | |
| 231 | this.visible = false | |
| 232 | }, | |
| 233 | handleScroll() { | |
| 234 | this.closeMenu() | |
| 235 | } | |
| 236 | } | |
| 237 | } | |
| 238 | </script> | |
| 239 | ||
| 240 | <style lang="scss" scoped> | |
| 241 | .tags-view-container { | |
| 242 | height: 34px; | |
| 243 | width: 100%; | |
| 244 | background: #fff; | |
| 245 | border-bottom: 1px solid #d8dce5; | |
| 246 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); | |
| 247 | .tags-view-wrapper { | |
| 248 | .tags-view-item { | |
| 249 | display: inline-block; | |
| 250 | position: relative; | |
| 251 | cursor: pointer; | |
| 252 | height: 26px; | |
| 253 | line-height: 26px; | |
| 254 | border: 1px solid #d8dce5; | |
| 255 | color: #495060; | |
| 256 | background: #fff; | |
| 257 | padding: 0 8px; | |
| 258 | font-size: 12px; | |
| 259 | margin-left: 5px; | |
| 260 | margin-top: 4px; | |
| 261 | &:first-of-type { | |
| 262 | margin-left: 15px; | |
| 263 | } | |
| 264 | &:last-of-type { | |
| 265 | margin-right: 15px; | |
| 266 | } | |
| 267 | &.active { | |
| 268 | background-color: #42b983; | |
| 269 | color: #fff; | |
| 270 | border-color: #42b983; | |
| 271 | &::before { | |
| 272 | content: ''; | |
| 273 | background: #fff; | |
| 274 | display: inline-block; | |
| 275 | width: 8px; | |
| 276 | height: 8px; | |
| 277 | border-radius: 50%; | |
| 278 | position: relative; | |
| 279 | margin-right: 2px; | |
| 280 | } | |
| 281 | } | |
| 282 | } | |
| 283 | } | |
| 284 | .contextmenu { | |
| 285 | margin: 0; | |
| 286 | background: #fff; | |
| 287 | z-index: 3000; | |
| 288 | position: absolute; | |
| 289 | list-style-type: none; | |
| 290 | padding: 5px 0; | |
| 291 | border-radius: 4px; | |
| 292 | font-size: 12px; | |
| 293 | font-weight: 400; | |
| 294 | color: #333; | |
| 295 | box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); | |
| 296 | li { | |
| 297 | margin: 0; | |
| 298 | padding: 7px 16px; | |
| 299 | cursor: pointer; | |
| 300 | &:hover { | |
| 301 | background: #eee; | |
| 302 | } | |
| 303 | } | |
| 304 | } | |
| 305 | } | |
| 306 | </style> | |
| 307 | ||
| 308 | <style lang="scss"> | |
| 309 | //reset element css of el-icon-close | |
| 310 | .tags-view-wrapper { | |
| 311 | .tags-view-item { | |
| 312 | .el-icon-close { | |
| 313 | width: 16px; | |
| 314 | height: 16px; | |
| 315 | vertical-align: 2px; | |
| 316 | border-radius: 50%; | |
| 317 | text-align: center; | |
| 318 | transition: all .3s cubic-bezier(.645, .045, .355, 1); | |
| 319 | transform-origin: 100% 50%; | |
| 320 | &:before { | |
| 321 | transform: scale(.6); | |
| 322 | display: inline-block; | |
| 323 | vertical-align: -3px; | |
| 324 | } | |
| 325 | &:hover { | |
| 326 | background-color: #b4bccc; | |
| 327 | color: #fff; | |
| 328 | } | |
| 329 | } | |
| 330 | } | |
| 331 | } | |
| 332 | </style> | |
