效果图,支持右键关闭其他关闭全部
废话不多说直接上代码
1.页面组件tagsView.vue、scrollPane.vue
<template>
<div class="tags-view-container">
<scroll-pane
class="tags-view-wrapper"
ref="scrollPane"
>
<router-link
ref="tag"
class="tags-view-item"
:class="isActive(tag)?'tagActive':''"
:to="tag"
@contextmenu.prevent.native="openMenu(tag,$event)"
v-for="tag in Array.from(visitedViews)"
:key="tag.path"
>
{
{tag.meta.title}}
<span
class="el-icon-close"
@click.prevent.stop='closeSelectedTag(tag)'
></span>
</router-link>
</scroll-pane>
<ul
class='contextmenu'
v-show="visible"
:style="{left:left+'px',top:top+'px'}"
>
<li @click="closeSelectedTag(selectedTag)">关闭</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags">关闭所有</li>
</ul>
</div>
</template>
<script>
import ScrollPane from "@/components/ScrollPane";
export default {
name: "tags-view",
components: { ScrollPane },
data() {
return {
visible: false,
top: 0,
left: 0,
selectedTag: {}
};
},
computed: {
visitedViews() {
console.log("tabView");
console.log(this.$store.state.tagsView);
console.log(this.$store.state);
return this.$store.state.tagsView.visitedViews;
}
},
watch: {
$route() {
this.addViewTags();
this.moveToCurrentTag();
},
visible(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
},
mounted() {
this.addViewTags();
},
methods: {
generateRoute() {
if (this.$route.name) {
return this.$route;
}
return fals