|
|
@@ -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;
|