UP 调整标签过多的提示形式

src/layout/components/tags.vue

@@ -1,21 +1,13 @@
 <template>
 	<div class="adminui-tags">
-		<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>
+		<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>
 	</div>
 
 	<transition name="el-zoom-in-top">
@@ -43,7 +35,6 @@
 				left: 0,
 				top: 0,
 				tagList: this.$store.state.viewTags.viewTags,
-				tipVisible: false,
 				tipDisplayed: false
 			}
 		},
@@ -60,8 +51,16 @@
 						targetTag.scrollIntoView()
 						//显示提示
 						if(!this.tipDisplayed){
-							this.tipVisible = true
+							this.$msgbox({
+								type: 'warning',
+								center: true,
+								title: '提示',
+								message: '当前标签数量过多，可通过鼠标滚轴滚动标签栏。关闭标签数量可减少系统性能消耗。',
+								confirmButtonText: '知道了'
+							})
+							this.tipDisplayed = true
 						}
+
 					}
 				})
 			},
@@ -250,10 +249,6 @@
 					}
 					scrollDiv.scrollLeft += step;
 				}
-			},
-			hideTip(){
-				this.tipVisible = false
-				this.tipDisplayed = true
 			}
 		}
 	}