perf: imgHover Teleport

gkd-kit · Nov 3, 2024 · b6f43ca · b6f43ca
1 parent e767df8
commit b6f43ca
Showing 1 changed file with 99 additions and 92 deletions.
diff --git a/src/views/snapshot/ScreenshotCard.vue b/src/views/snapshot/ScreenshotCard.vue
@@ -92,6 +92,8 @@ const imgMove = (ev: MouseEvent) => {
     top: (-(oy - 0.1 * img.naturalWidth) / img.naturalWidth) * 1000 + 'px',
   };
 };
+
+const imgBounding = useElementBounding(imgRef);
 </script>
 
 <template>
@@ -120,102 +122,107 @@ const imgMove = (ev: MouseEvent) => {
     >
       <div absolute left-0 top-0 bottom-0 right-0 b-solid b-1px b-red></div>
     </div>
-
-    <div
-      v-show="imgHover"
-      class="left-[calc(100%+4px)]"
-      absolute
-      top-0
-      overflow-hidden
-      z-1
-      bg-white
-      h-200px
-      w-200px
-      border-1px
-      border-indigo-600
-      border-dashed
-    >
-      <img
-        :src="screenshotUrl"
-        object-contain
-        absolute
-        left-0
-        top-0
-        :style="hoverPositionStyle"
-        w-1000px
-      />
-      <div
-        absolute
-        left-2px
-        top-2px
-        p-1px
-        z-1
-        text-13px
-        class="leading-[1] bg-[rgba(256,256,256,0.7)]"
-      >
-        {{ `${hoverPosition.ox.toFixed(0)},${hoverPosition.oy.toFixed(0)}` }}
-      </div>
+    <Teleport to="body">
+      <!-- 渲染在外部防止被遮挡 -->
       <div
-        v-if="boxHoverPosition"
+        v-show="imgHover"
+        :style="{
+          left: imgBounding.right.value + 4 + 'px',
+          top: imgBounding.top.value + 'px',
+        }"
+        pointer-events-none
         absolute
-        left-2px
-        bottom-2px
-        p-1px
-        z-1
-        text-12px
-        class="leading-[1] bg-[rgba(256,256,256,0.7)]"
-        flex
-        flex-col
-        flex-items-center
+        overflow-hidden
+        z-2
+        bg-white
+        h-200px
+        w-200px
+        border-1px
+        border-indigo-600
+        border-dashed
       >
-        <div>{{ boxHoverPosition.top.toFixed(0) }}</div>
-        <div>
-          {{
-            boxHoverPosition.left.toFixed(0) +
-            ',' +
-            boxHoverPosition.right.toFixed(0)
-          }}
+        <img
+          :src="screenshotUrl"
+          object-contain
+          absolute
+          left-0
+          top-0
+          :style="hoverPositionStyle"
+          w-1000px
+        />
+        <div
+          absolute
+          left-2px
+          top-2px
+          p-1px
+          z-1
+          text-13px
+          class="leading-[1] bg-[rgba(256,256,256,0.7)]"
+        >
+          {{ `${hoverPosition.ox.toFixed(0)},${hoverPosition.oy.toFixed(0)}` }}
         </div>
-        <div>{{ boxHoverPosition.bottom.toFixed(0) }}</div>
+        <div
+          v-if="boxHoverPosition"
+          absolute
+          left-2px
+          bottom-2px
+          p-1px
+          z-1
+          text-12px
+          class="leading-[1] bg-[rgba(256,256,256,0.7)]"
+          flex
+          flex-col
+          flex-items-center
+        >
+          <div>{{ boxHoverPosition.top.toFixed(0) }}</div>
+          <div>
+            {{
+              boxHoverPosition.left.toFixed(0) +
+              ',' +
+              boxHoverPosition.right.toFixed(0)
+            }}
+          </div>
+          <div>{{ boxHoverPosition.bottom.toFixed(0) }}</div>
+        </div>
+        <div
+          class="top-[calc(50%-1px)] bg-[length:10px_1px]"
+          absolute
+          left-0
+          right-0
+          h-1px
+          bg-repeat-x
+          mix-blend-difference
+          style="
+            background-image: linear-gradient(
+              to left,
+              transparent 0%,
+              transparent 50%,
+              #fff 50%,
+              #fff 100%
+            );
+            background-position-x: 1.5px;
+          "
+        ></div>
+        <div
+          class="left-[calc(50%-1px)] bg-[length:1px_10px]"
+          absolute
+          top-0
+          bottom-0
+          w-1px
+          bg-repeat-y
+          mix-blend-difference
+          style="
+            background-image: linear-gradient(
+              to top,
+              transparent 0%,
+              transparent 50%,
+              #fff 50%,
+              #fff 100%
+            );
+            background-position-y: 1.5px;
+          "
+        ></div>
       </div>
-      <div
-        class="top-[calc(50%-1px)] bg-[length:10px_1px]"
-        absolute
-        left-0
-        right-0
-        h-1px
-        bg-repeat-x
-        mix-blend-difference
-        style="
-          background-image: linear-gradient(
-            to left,
-            transparent 0%,
-            transparent 50%,
-            #fff 50%,
-            #fff 100%
-          );
-          background-position-x: 1.5px;
-        "
-      ></div>
-      <div
-        class="left-[calc(50%-1px)] bg-[length:1px_10px]"
-        absolute
-        top-0
-        bottom-0
-        w-1px
-        bg-repeat-y
-        mix-blend-difference
-        style="
-          background-image: linear-gradient(
-            to top,
-            transparent 0%,
-            transparent 50%,
-            #fff 50%,
-            #fff 100%
-          );
-          background-position-y: 1.5px;
-        "
-      ></div>
-    </div>
+    </Teleport>
   </div>
 </template>