| | |
|---|
| | | <template>
|
|---|
| | | <div class="tagContainer">
|
|---|
| | | <div v-for="(tag, index) in tags" :key="index" class="tagItem">
|
|---|
| | | {{ tag }}
|
|---|
| | | <span class="closeBtn" @click="removeTag(index)">x</span>
|
|---|
| | | <keep-alive>
|
|---|
| | | <div |
|---|
| | | class="tag" |
|---|
| | | :class="{ active: isActive }" |
|---|
| | | @click="switchTag(tag)">
|
|---|
| | | <span>{{ tag }}</span>
|
|---|
| | | <i class="el-icon-close" @click.stop="removeTag(tag)"></i>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </keep-alive>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | import { mapState, mapMutations } from 'vuex';
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | props: {
|
|---|
| | | tag: {
|
|---|
| | | type: String,
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | activeTag: {
|
|---|
| | | type: String,
|
|---|
| | | required: true
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | ...mapState('tags', { // 这里添加了 'tags' 模块的命名空间前缀
|
|---|
| | | tags: state => state.tags.tags
|
|---|
| | | })
|
|---|
| | | isActive() {
|
|---|
| | | return this.tag === this.activeTag;
|
|---|
| | | },
|
|---|
| | | tagData() {
|
|---|
| | | return this.$store.getters.getTagData(this.tag);
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | ...mapMutations('tag', ['removeTag']),
|
|---|
| | | saveNavState(activePath) {
|
|---|
| | | window.sessionStorage.setItem('activePath', activePath);
|
|---|
| | | removeTag(tag) {
|
|---|
| | | this.$emit('removeTag', tag);
|
|---|
| | | },
|
|---|
| | | switchTag(tag) {
|
|---|
| | | this.$emit('switchTag', tag);
|
|---|
| | | this.$router.push('/' + tag); // 切换到指定路由
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 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>
|
|---|
| | | .tagContainer {
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | margin-bottom: 10px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tagItem {
|
|---|
| | | background-color: #eee;
|
|---|
| | | .tag {
|
|---|
| | | display: inline-block;
|
|---|
| | | margin-right: 10px;
|
|---|
| | | padding: 4px 10px;
|
|---|
| | | border-radius: 4px;
|
|---|
| | | padding: 4px 8px;
|
|---|
| | | margin-right: 8px;
|
|---|
| | | margin-bottom: 8px;
|
|---|
| | | display: flex;
|
|---|
| | | align-items: center;
|
|---|
| | | background-color: #f0f0f0;
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .closeBtn {
|
|---|
| | | margin-left: 4px;
|
|---|
| | | color: red;
|
|---|
| | | .tag.active {
|
|---|
| | | background-color: #409eff;
|
|---|
| | | color: #fff;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tag span {
|
|---|
| | | margin-right: 5px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tag i {
|
|---|
| | | margin-left: 5px;
|
|---|
| | | font-size: 12px;
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
