【新增】多标签鼠标中键关闭，并优雅地修复右键关闭按钮出现"使用了错误的类型或对象"的问题

snowy-admin-web/src/components/XnContextMenu/index.vue

@@ -68,17 +68,11 @@
 			},
 			// 右键事件事件处理
 			contextMenuHandler(e) {
-				//兼容ie写法
+				this.x = e.clientX
-				let obj = e.srcElement ? e.srcElement : e.target
+				this.y = e.clientY
-				let cs = obj.attributes['class']
+				this.layout()
-				cs = cs ? cs.nodeValue : cs
+				this.$emit('update:show', true)
-				if(cs&&cs!=='ant-tabs-tab-remove'){
+				this.$emit('get-context-menu', e)
-					this.x = e.clientX
-					this.y = e.clientY
-					this.layout()
-					this.$emit('update:show', true)
-					this.$emit('get-context-menu', e)
-				}
 				e.preventDefault()
 			},
 			// 布局

snowy-admin-web/src/layout/components/tags.vue

@@ -39,6 +39,7 @@
 			ref="tabs"
 			@edit="onTabRemove"
 			@tabClick="onTabClick"
+			@mouseup="onTabUp"
 		>
 			<template #leftExtra>
 				<div class="snowy-admin-tabs-arrow" @click="scrollLeft">
@@ -116,7 +117,11 @@
 			handleTabContextMenu(evt) {
 				evt.preventDefault()
 				let target = evt.target
-				if (target.classList.contains('ant-tabs-tab-btn')) {
+				// 修复关闭时出现"使用了错误的类型或对象"的问题
+				while (!target.classList.contains('ant-tabs-tab')) {
+					if (target.classList.contains('ant-tabs')) {
+						return
+					}
 					target = target.parentNode
 				}
 				const tabList = document.querySelectorAll('.ant-tabs-nav-list .ant-tabs-tab')
@@ -134,6 +139,14 @@
 					this.closeSelectedTag(tag)
 				}
 			},
+			// 处理鼠标放开事件
+			onTabUp(e) {
+				// 鼠标中键
+				if (e.which === 2) {
+					this.handleTabContextMenu(e)
+					this.closeTabs()
+				}
+			},
 			getTabWrapEl() {
 				return document.querySelector('.ant-tabs-nav-wrap')
 			},