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