From ee84c191faa2c235703eaa8cdc765729bed71a4f Mon Sep 17 00:00:00 2001
From: clll <1320612696@qq.com>
Date: 星期三, 06 九月 2023 17:37:46 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.150:10101/r/CanadaMes
---
CanadaMes-ui/src/layout/tag.vue | 93 ++++++++++++++++++++++++++--------------------
1 files changed, 52 insertions(+), 41 deletions(-)
diff --git a/CanadaMes-ui/src/layout/tag.vue b/CanadaMes-ui/src/layout/tag.vue
index ccf38fd..01a1b7d 100644
--- a/CanadaMes-ui/src/layout/tag.vue
+++ b/CanadaMes-ui/src/layout/tag.vue
@@ -1,59 +1,70 @@
<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;
-}
-
-.closeBtn {
- margin-left: 4px;
- color: red;
+ background-color: #f0f0f0;
cursor: pointer;
}
-</style>
+
+.tag.active {
+ background-color: #409eff;
+ color: #fff;
+}
+
+.tag span {
+ margin-right: 5px;
+}
+
+.tag i {
+ margin-left: 5px;
+ font-size: 12px;
+ cursor: pointer;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0