From 6694010b065764d5a5667cccb9272fc8f3e74b3c Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Tue, 13 Jul 2021 15:46:23 +0800
Subject: [PATCH] =?UTF-8?q?FIX=20=E6=A0=87=E7=AD=BE=E8=BF=87=E5=A4=9A?=
 =?UTF-8?q?=E6=BA=A2=E5=87=BA&=E6=A0=87=E7=AD=BE=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E8=BE=B9=E7=BC=98=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/tags.vue | 39 +++++++++++++++++++++++++++++++++-
 src/style/app.less             |  5 +++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/layout/components/tags.vue b/src/layout/components/tags.vue
index db2266e6..d33b19a7 100644
--- a/src/layout/components/tags.vue
+++ b/src/layout/components/tags.vue
@@ -41,6 +41,15 @@
 		watch: {
 			$route(e) {
 				this.addViewTags(e);
+				//判断标签容器是否出现滚动条
+				this.$nextTick(() => {
+					const tags = this.$refs.tags
+					if(tags.scrollWidth > tags.clientWidth){
+						//确保当前标签在可视范围内
+						let targetTag = tags.querySelector(".active")
+						targetTag.scrollIntoView()
+					}
+				})
 			},
 			contextMenuVisible(value) {
 				var _this = this;
@@ -63,6 +72,7 @@
 		},
 		mounted() {
 			this.tagDrop();
+			this.scrollInit()
 		},
 		methods: {
 			//标签拖拽排序
@@ -104,6 +114,15 @@
 				this.contextMenuVisible = true;
 				this.left = e.clientX + 1;
 				this.top = e.clientY + 1;
+				
+				//FIX 右键菜单边缘化位置处理
+				this.$nextTick(() => {
+					let sp = document.getElementById("contextmenu");
+					if(document.body.offsetWidth - e.clientX < sp.offsetWidth){
+						this.left = document.body.offsetWidth - sp.offsetWidth + 1;
+						this.top = e.clientY + 1;
+					}
+				})
 			},
 			//关闭右键菜单
 			closeMenu() {
@@ -174,7 +193,24 @@
 				}
 				window.open(url);
 				this.contextMenuVisible = false
-			}
+			},
+			//横向滚动
+			scrollInit(){
+				const scrollDiv = this.$refs.tags;
+				scrollDiv.addEventListener('mousewheel', handler, false)
+				function handler(event) {
+					const detail = event.wheelDelta || event.detail;
+					const moveForwardStep = 1;
+					const moveBackStep = -1;
+					let step = 0;
+					if (detail < 0) {
+						step = moveForwardStep * 50;
+					}else{
+						step = moveBackStep * 50;
+					}
+					scrollDiv.scrollLeft += step;
+				}
+			},
 		}
 	}
 </script>
@@ -182,6 +218,7 @@
 <style>
 	.contextmenu {
 		position: fixed;
+		width: 200px;
 		margin:0;
 		border-radius: 0px;
 		background: #fff;
diff --git a/src/style/app.less b/src/style/app.less
index efe4dc81..f4d1b6e2 100644
--- a/src/style/app.less
+++ b/src/style/app.less
@@ -78,8 +78,9 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-topbar .menu-collapse i {font-size: 16px;}
 .adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, #d9ecff, transparent);}
 
-.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
-.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;}
+.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;}
+.adminui-tags ul {display: flex;overflow: hidden;}
+.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;flex-shrink: 0;}
 .adminui-tags li::after {content: " ";width:1px;height:100%;position: absolute;right:0px;background-image: linear-gradient(#fff, #e6e6e6);}
 .adminui-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;}
 .adminui-tags li i {margin-left:10px;padding:3px;border-radius: 3px;}