feat: tag滚动会自动多展示前一个/后一个tag

meadmin-cn · Aug 18, 2023 · 4d40627 · 4d40627
1 parent 64393f1
commit 4d40627
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/src/layout/components/header/components/tagBar/index.vue b/src/layout/components/header/components/tagBar/index.vue
@@ -131,19 +131,30 @@ const go = () => {
 const jump = (index: number) => {
   nextTick(() => {
     if (tagsRef.value[index]) {
-      const offsetLeft = tagsRef.value[index].offsetLeft;
-      const offsetWidth = tagsRef.value[index].offsetWidth;
-      const offsetRight = offsetWidth + offsetLeft;
+      currentTag.value = tags[index];
+      if (index === 0) {
+        setScrollLeft(0);
+        return;
+      }
+      if (index === tagsRef.value.length - 1) {
+        setScrollLeft(tagsRef.value[tagsRef.value.length - 1].offsetLeft);
+        return;
+      }
       const parentWidth = scrollbarRef.value!.$el.clientWidth;
       const parentLeft = scrollLeft.value;
       const parentRight = parentWidth + scrollLeft.value;
-      if (offsetLeft < parentLeft) {
+      const lastLeft = tagsRef.value[index - 1].offsetLeft;
+      const offsetLeft = tagsRef.value[index].offsetLeft;
+      const offsetRight = offsetLeft + tagsRef.value[index].offsetWidth;
+      const nextLeft = tagsRef.value[index + 1].offsetLeft;
+      const nextRight = nextLeft + tagsRef.value[index + 1].offsetWidth;
+      if (parentWidth <= offsetRight - lastLeft || parentWidth <= nextRight - offsetLeft) {
         setScrollLeft(offsetLeft);
+      } else if (lastLeft < parentLeft) {
+        setScrollLeft(lastLeft);
+      } else if (nextRight > parentRight) {
+        setScrollLeft(nextRight - parentWidth);
       }
-      if (offsetRight > parentRight) {
-        setScrollLeft(offsetLeft + offsetWidth - parentWidth);
-      }
-      currentTag.value = tags[index];
     }
   });
 };