| | |
|---|
| | | <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 class="tagContainer">
|
|---|
| | | <div v-for="(tag, index) in tags" :key="index" class="tagItem">
|
|---|
| | | {{ tag }}
|
|---|
| | | <span class="closeBtn" @click="removeTag(index)">x</span>
|
|---|
| | | </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
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | import { mapState, mapMutations } from 'vuex';
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | computed: {
|
|---|
| | | ...mapState('tags', { // 这里添加了 'tags' 模块的命名空间前缀
|
|---|
| | | tags: state => state.tags.tags
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | ...mapMutations('tag', ['removeTag']),
|
|---|
| | | saveNavState(activePath) {
|
|---|
| | | window.sessionStorage.setItem('activePath', activePath);
|
|---|
| | | |
|---|
| | | const menuItem = this.menuList.find(item => item.menuLists.some(menu => menu.router === activePath));
|
|---|
| | | if (menuItem) {
|
|---|
| | | const submenuItem = menuItem.menuLists.find(menu => menu.router === activePath);
|
|---|
| | | if (submenuItem) {
|
|---|
| | | const tag = submenuItem.name;
|
|---|
| | | this.addTag(tag); // 添加标签到 Vuex Store
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | | </script>
|
|---|
| | | |
|---|
| | | <style scoped>
|
|---|
| | | ._tag {
|
|---|
| | | display: flex;
|
|---|
| | | align-items: center;
|
|---|
| | | padding: 10px;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .left {
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .tag-title {
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style scoped>
|
|---|
| | | .tagContainer {
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | margin-bottom: 10px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tagItem {
|
|---|
| | | background-color: #eee;
|
|---|
| | | border-radius: 4px;
|
|---|
| | | padding: 4px 8px;
|
|---|
| | | margin-right: 8px;
|
|---|
| | | margin-bottom: 8px;
|
|---|
| | | display: flex;
|
|---|
| | | align-items: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .closeBtn {
|
|---|
| | | margin-left: 4px;
|
|---|
| | | color: red;
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
