Переглянути джерело

分组线单独放一个容器,避免dom影响其它组件

dsy 1 тиждень тому
батько
коміт
3678715936
2 змінених файлів з 19 додано та 8 видалено
  1. 1 1
      .env
  2. 18 7
      src/views/book/courseware/create/components/CreateCanvas.vue

+ 1 - 1
.env

@@ -11,4 +11,4 @@ VUE_APP_BookWebSI = '/GCLSBookWebSI/ServiceInterface'
 VUE_APP_EepServer = '/EEPServer/SI'
 
 #version
-VUE_APP_VERSION = '2026.08.21'
+VUE_APP_VERSION = '2026.08.22'

+ 18 - 7
src/views/book/courseware/create/components/CreateCanvas.vue

@@ -1,13 +1,17 @@
 <template>
   <main ref="canvas" class="canvas">
     <div v-if="isEdit" class="edit">
-      <div
-        v-for="item in lineList"
-        :key="item[0]"
-        class="group-line"
-        :data-canvas-height="canvasHeight"
-        :style="computedGroupLine(item)"
-      ></div>
+      <!-- 分组线单独放在一个绝对定位容器中,避免与行列表在同一 children 列表里 diff,
+        否则删除被分组的行时 Vue 会移动上方行的 DOM,导致 tinymce iframe 重载、内容丢失 -->
+      <div class="group-lines">
+        <div
+          v-for="item in lineList"
+          :key="item[0]"
+          class="group-line"
+          :data-canvas-height="canvasHeight"
+          :style="computedGroupLine(item)"
+        ></div>
+      </div>
       <span class="drag-line" data-row="-1"></span>
       <!-- 行 -->
       <template v-for="(row, i) in data.row_list">
@@ -2009,6 +2013,13 @@ export default {
     margin: 0 auto;
     background-color: #fff;
 
+    .group-lines {
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+    }
+
     .group-line {
       position: absolute;
       left: 11px;