Răsfoiți Sursa

鼠标跟随的浮窗位置修复

zxlie 4 luni în urmă
părinte
comite
202c469d83
2 a modificat fișierele cu 14 adăugiri și 13 ștergeri
  1. 12 13
      apps/json-format/format-lib.js
  2. 2 0
      apps/json-format/index.css

+ 12 - 13
apps/json-format/format-lib.js

@@ -558,12 +558,7 @@ window.Formatter = (function () {
             let cache = getImgCache();
             if (cache.hasOwnProperty(url)) {
                 if (cache[url]) {
-                    if (!$imgPreview || !$imgPreview.length) {
-                        $imgPreview = $('#fh-img-preview');
-                        if (!$imgPreview.length) {
-                            $imgPreview = $('<div id="fh-img-preview" style="position:fixed;z-index:999999;border:1px solid #ccc;background:#fff;padding:4px;box-shadow:0 2px 8px #0002;pointer-events:none;"><img style="max-width:300px;max-height:200px;display:block;"></div>').appendTo('body');
-                        }
-                    }
+                    $imgPreview = getOrCreateImgPreview();
                     $imgPreview.find('img').attr('src', url);
                     $imgPreview.show();
                     $(document).on('mousemove.fhimg', function(ev) {
@@ -583,13 +578,8 @@ window.Formatter = (function () {
             const img = new window.Image();
             img.src = url;
             img.onload = function() {
-                // 保证页面上只存在一个浮窗节点
-                if (!$imgPreview || !$imgPreview.length) {
-                    $imgPreview = $('#fh-img-preview');
-                    if (!$imgPreview.length) {
-                        $imgPreview = $('<div id="fh-img-preview" style="position:fixed;z-index:999999;border:1px solid #ccc;background:#fff;padding:4px;box-shadow:0 2px 8px #0002;pointer-events:none;"><img style="max-width:300px;max-height:200px;display:block;"></div>').appendTo('body');
-                    }
-                }
+                setImgCache(url, true);
+                $imgPreview = getOrCreateImgPreview();
                 $imgPreview.find('img').attr('src', url);
                 $imgPreview.show();
                 $(document).on('mousemove.fhimg', function(ev) {
@@ -735,6 +725,15 @@ window.Formatter = (function () {
         }
     };
 
+    // 工具函数:获取或创建唯一图片预览浮窗节点
+    function getOrCreateImgPreview() {
+        let $img = $('#fh-img-preview');
+        if (!$img.length) {
+            $img = $('<div id="fh-img-preview" style="position:absolute;z-index:999999;border:1px solid #ccc;background:#fff;padding:4px;box-shadow:0 2px 8px #0002;pointer-events:none;"><img style="max-width:300px;max-height:200px;display:block;"></div>').appendTo('body');
+        }
+        return $img;
+    }
+
     return {
         format: format,
         formatSync: formatSync

+ 2 - 0
apps/json-format/index.css

@@ -175,6 +175,8 @@ html.fh-jf .x-toolbar.x-inpage {
 
 #fh-img-preview {
   display: none;
+  position: absolute !important;
+  z-index: 2147483647 !important;
   pointer-events: none;
   border-radius: 4px;
   background: #fff;