<template>
|
<div class="_tag">
|
<el-scrollbar style="margin-right: 6px;">
|
<div class="left">
|
<el-tag
|
v-for="tag in tagsList"
|
:key="tag.title"
|
:closable="!tag.hideclose"
|
:type="isActive(tag)"
|
@close="removeTag(tag)"
|
@click="handleTagClick(tag)"
|
>
|
<router-link :to="tag.path" class="tag-title">{{ tag.title }}</router-link>
|
</el-tag>
|
</div>
|
</el-scrollbar>
|
|
<el-dropdown @command="handleCloseBtn" class="_dropdown">
|
<el-button type="primary" size="small">
|
标签选项
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="closeOther">关闭其它</el-dropdown-item>
|
<el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapMutations } from "vuex";
|
|
export default {
|
computed: {
|
...mapState("tags", ["tagsList"]),
|
activeTag() {
|
return this.tagsList.find(tag => tag.path === this.$route.fullPath);
|
}
|
},
|
methods: {
|
...mapMutations("tags", ["removeTag"]),
|
handleCloseBtn(command) {
|
if (command === "closeOther") {
|
const activeTag = this.activeTag;
|
if (!activeTag || activeTag.hideclose) return;
|
this.$store.commit("tags/removeOtherTags", activeTag);
|
} else if (command === "closeAll") {
|
this.$store.commit("tags/removeAllTags");
|
this.$router.push({ name: "sadmasMain" });
|
}
|
},
|
isActive(tag) {
|
return tag.path === this.$route.fullPath ? "" : "info";
|
},
|
handleTagClick(tag) {
|
this.$router.push(tag.path);
|
}
|
},
|
watch: {
|
$route(newValue) {
|
const isExist = this.tagsList.some(item => item.path === newValue.fullPath);
|
if (!isExist) {
|
this.$store.commit("tags/addTag", {
|
title: newValue.meta.title || "",
|
path: newValue.fullPath,
|
hideclose: newValue.meta.hideclose || false
|
});
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
._tag {
|
display: flex;
|
align-items: center;
|
padding: 10px;
|
}
|
|
.left {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.tag-title {
|
cursor: pointer;
|
}
|
</style>
|
|
