From 9f93d52ea41c224756dcdaec97b1933045b43617 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Thu, 10 Feb 2022 15:32:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E8=BF=87=E5=A4=9A=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=98=BE=E7=A4=BA=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/tags.vue | 39 ++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/layout/components/tags.vue b/src/layout/components/tags.vue
index 9e75020a..b06e0876 100644
--- a/src/layout/components/tags.vue
+++ b/src/layout/components/tags.vue
@@ -1,13 +1,21 @@
 <template>
 	<div class="adminui-tags">
-		<ul ref="tags">
-			<li v-for="tag in tagList" v-bind:key="tag" :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]" @contextmenu.prevent="openContextMenu($event, tag)">
-				<router-link :to="tag">
-				<span>{{ tag.meta.title }}</span>
-				<el-icon v-if="!tag.meta.affix" @click.prevent.stop='closeSelectedTag(tag)'><el-icon-close/></el-icon>
-				</router-link>
-			</li>
-		</ul>
+		<el-tooltip v-model:visible="tipVisible" placement="bottom-end" effect="light">
+			<ul ref="tags">
+				<li v-for="tag in tagList" v-bind:key="tag" :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]" @contextmenu.prevent="openContextMenu($event, tag)">
+					<router-link :to="tag">
+					<span>{{ tag.meta.title }}</span>
+					<el-icon v-if="!tag.meta.affix" @click.prevent.stop='closeSelectedTag(tag)'><el-icon-close/></el-icon>
+					</router-link>
+				</li>
+			</ul>
+			<template #content>
+				<div class="tags-tip">
+					<p>当前标签过多，可通过鼠标滚轴滚动</p>
+					<el-button size="small" type="primary" plain @click="hideTip">知道了</el-button>
+				</div>
+			</template>
+		</el-tooltip>
 	</div>
 
 	<transition name="el-zoom-in-top">
@@ -34,7 +42,9 @@
 				contextMenuItem: null,
 				left: 0,
 				top: 0,
-				tagList: this.$store.state.viewTags.viewTags
+				tagList: this.$store.state.viewTags.viewTags,
+				tipVisible: false,
+				tipDisplayed: false
 			}
 		},
 		props: {},
@@ -48,6 +58,10 @@
 						//确保当前标签在可视范围内
 						let targetTag = tags.querySelector(".active")
 						targetTag.scrollIntoView()
+						//显示提示
+						if(!this.tipDisplayed){
+							this.tipVisible = true
+						}
 					}
 				})
 			},
@@ -236,6 +250,10 @@
 					scrollDiv.scrollLeft += step;
 				}
 			},
+			hideTip(){
+				this.tipVisible = false
+				this.tipDisplayed = true
+			}
 		}
 	}
 </script>
@@ -282,4 +300,7 @@
 		color: #bbb;
 		background: transparent;
 	}
+
+	.tags-tip {padding:5px;}
+	.tags-tip p {margin-bottom: 10px;}
 </style>