<template>
|
<div class="tagContainer">
|
<div v-for="(tag, index) in tags" :key="index" class="tagItem">
|
{{ tag }}
|
<span class="closeBtn" @click="removeTag(index)">x</span>
|
</div>
|
</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>
|
.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>
|
