连线题控制最大宽高，鼠标移动上去显示原图片

src/views/exercise_questions/create/components/exercises/MatchingQuestion.vue

@@ -204,6 +204,7 @@ export default {
 
       .rich-wrapper {
         flex: 1;
+        min-width: 100px;
         min-height: 32px;
         background-color: $fill-color;
 

src/views/exercise_questions/preview/MatchingPreview.vue

@@ -178,11 +178,13 @@ export default {
     document.addEventListener('click', this.handleEventConnection);
     document.addEventListener('mousemove', this.documentMousemouse);
     document.addEventListener('mouseup', this.documentMouseup);
+    this.$refs.list.addEventListener('mouseover', this.imgCloneEvent);
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleEventConnection);
     document.removeEventListener('mousemove', this.documentMousemouse);
     document.removeEventListener('mouseup', this.documentMouseup);
+    this.$refs.list.removeEventListener('mouseover', this.imgCloneEvent);
   },
   methods: {
     /* 用 mouse 事件模拟拖拽 开始*/
@@ -522,6 +524,55 @@ export default {
       }
       return false;
     },
+    // 鼠标进入 ref list 里的元素时，部署进入 img 元素的事件
+    imgCloneEvent(e) {
+      // 元素是 img 且不是 img-clone 时，复制 img 元素
+      if (e.target.tagName === 'IMG' && !e.target.classList.contains('img-clone')) {
+        let imgNatrueWidth = e.target.naturalWidth; // 图片的原始宽度
+        // 将复制的图片显示到 item-wrapper 中
+        // 向上查找父元素，直到找到 item-wrapper
+        let parentNode = e.target.parentNode;
+        while (parentNode && !parentNode.classList.contains('item-wrapper')) {
+          parentNode = parentNode.parentNode;
+        }
+        // 获取 parentNode 距离左侧的距离
+        let parentNodeOffsetLeft = parentNode.offsetLeft + 64;
+        let div = document.createElement('div');
+        let left = e.target.offsetLeft;
+        let width = e.target.width;
+        // 获取预览区域
+        let preview = document.querySelector('.matching-preview');
+        let previewWidth = preview.offsetWidth;
+        // 宽度剩余距离 = 预览区域宽度 - 图片的原始宽度 - 父元素距离左侧的距离 - 图片的宽度 - 图片距离父元素的左边距 - 复制的图片需要距离原图片的宽度
+        let widthExceed = previewWidth - imgNatrueWidth - parentNodeOffsetLeft - width - left - 12;
+        // 判断图片宽度是否超出预览区域
+        if (widthExceed < 0) {
+          let imgLeft =
+            previewWidth - parentNodeOffsetLeft > imgNatrueWidth
+              ? 24
+              : previewWidth - imgNatrueWidth - parentNodeOffsetLeft - 12;
+          div.style = `position: absolute; top: 100%; left: ${imgLeft}px; z-index: 100;`;
+        } else {
+          div.style = `position: absolute; top: 0px; left: ${left + width + 16}px; z-index: 100;`;
+        }
+        // 复制 img 元素
+        let img = e.target.cloneNode();
+        img.classList.add('img-clone');
+        img.style = 'border-radius: 8px;';
+        img.style.objectFit = 'scale-down';
+        div.appendChild(img);
+        let content = document.querySelector('.preview-content');
+        // 判断scrollTop 是否已到底部
+        if (content.scrollHeight - content.scrollTop === content.clientHeight) {
+          content.scrollTop -= 1;
+        }
+        parentNode.appendChild(div);
+        // 鼠标移出 div 元素时，删除 div 元素
+        e.target.addEventListener('mouseout', () => {
+          div.remove();
+        });
+      }
+    },
   },
 };
 </script>
@@ -548,6 +599,7 @@ export default {
       }
 
       .item-wrapper {
+        position: relative;
         display: flex;
         flex: 1;
         column-gap: 24px;
@@ -575,6 +627,12 @@ export default {
 
         .content {
           flex: 1;
+
+          :deep img {
+            max-width: 100%;
+            max-height: 42px;
+            object-fit: scale-down;
+          }
         }
       }
     }