@dolphinweex/weex-harmony 0.1.75 → 0.1.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -40,6 +40,9 @@ export default {
|
|
|
40
40
|
height: '0px',
|
|
41
41
|
_resizeObserver: null,
|
|
42
42
|
_heightCheckTimer: null,
|
|
43
|
+
_weexRoot: null,
|
|
44
|
+
_useChildrenTotalHeight: false,
|
|
45
|
+
_parentElement: null, // 符合条件的父级元素
|
|
43
46
|
};
|
|
44
47
|
},
|
|
45
48
|
components: {
|
|
@@ -124,6 +127,16 @@ export default {
|
|
|
124
127
|
return null;
|
|
125
128
|
};
|
|
126
129
|
this._wrapperEl = findWrapperFromParent(); // 保存容器引用
|
|
130
|
+
|
|
131
|
+
// 直接获取父级元素，如果 hmcomponentindex 属性存在且值为 midea-common-weex-view，则保存引用
|
|
132
|
+
const parentEl = this.$el;
|
|
133
|
+
if (parentEl) {
|
|
134
|
+
const hmComponentIndex = parentEl.getAttribute('hmcomponentindex');
|
|
135
|
+
if (hmComponentIndex === 'midea-common-weex-view') {
|
|
136
|
+
this._parentElement = parentEl;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
127
140
|
// 优化手势处理性能
|
|
128
141
|
this._rafId = null;
|
|
129
142
|
this._pendingGesture = null;
|
|
@@ -167,6 +180,40 @@ export default {
|
|
|
167
180
|
}
|
|
168
181
|
},
|
|
169
182
|
|
|
183
|
+
// 计算 weex-root 所有子元素的高度总和
|
|
184
|
+
calculateWeexRootChildrenHeight(weexRoot) {
|
|
185
|
+
if (!weexRoot || !weexRoot.children || weexRoot.children.length === 0) {
|
|
186
|
+
return 0;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
let totalHeight = 0;
|
|
190
|
+
const children = Array.from(weexRoot.children);
|
|
191
|
+
|
|
192
|
+
// 方法1: 计算所有子元素的 bottom 位置的最大值，减去第一个子元素的 top 位置
|
|
193
|
+
if (children.length > 0) {
|
|
194
|
+
const firstChildRect = children[0].getBoundingClientRect();
|
|
195
|
+
const rootRect = weexRoot.getBoundingClientRect();
|
|
196
|
+
let maxBottom = firstChildRect.bottom;
|
|
197
|
+
|
|
198
|
+
children.forEach((child) => {
|
|
199
|
+
const rect = child.getBoundingClientRect();
|
|
200
|
+
maxBottom = Math.max(maxBottom, rect.bottom);
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
totalHeight = maxBottom - rootRect.top;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
// 如果方法1计算出的高度为0或太小，则累加所有子元素的高度
|
|
207
|
+
if (totalHeight <= 0) {
|
|
208
|
+
children.forEach((child) => {
|
|
209
|
+
const childHeight = child.offsetHeight || child.clientHeight || child.scrollHeight || 0;
|
|
210
|
+
totalHeight += childHeight;
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
return totalHeight;
|
|
215
|
+
},
|
|
216
|
+
|
|
170
217
|
// 监听 iframe 内 .weex-root 第一个子元素或 .weex-scroller-inner 的高度
|
|
171
218
|
startWeexRootHeightMonitoring() {
|
|
172
219
|
// 尝试多次查找元素（因为 iframe 内容可能还在加载）
|
|
@@ -189,8 +236,9 @@ export default {
|
|
|
189
236
|
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
|
190
237
|
let targetElement = null;
|
|
191
238
|
let elementDesc = '';
|
|
239
|
+
let useChildrenTotalHeight = false; // 标记是否使用子元素总高度
|
|
192
240
|
|
|
193
|
-
// 查找 .weex-root
|
|
241
|
+
// 查找 .weex-root
|
|
194
242
|
const weexRoot = iframeDocument.querySelector('.weex-root');
|
|
195
243
|
const weexRootFirstChild = (weexRoot && weexRoot.children.length > 0) ? weexRoot.children[0] : null;
|
|
196
244
|
|
|
@@ -199,20 +247,29 @@ export default {
|
|
|
199
247
|
|
|
200
248
|
// 如果两个都找到了，比较高度，谁大用谁
|
|
201
249
|
if (weexRootFirstChild && weexScrollerInner) {
|
|
202
|
-
|
|
250
|
+
// 计算 weex-root 所有子元素的总高度
|
|
251
|
+
const rootChildrenTotalHeight = this.calculateWeexRootChildrenHeight(weexRoot);
|
|
252
|
+
const rootFirstChildHeight = weexRootFirstChild.offsetHeight || weexRootFirstChild.clientHeight || 0;
|
|
253
|
+
// 使用子元素总高度和第一个子元素高度的较大值
|
|
254
|
+
const rootHeight = Math.max(rootChildrenTotalHeight, rootFirstChildHeight);
|
|
203
255
|
const scrollerHeight = weexScrollerInner.offsetHeight || weexScrollerInner.clientHeight || 0;
|
|
204
256
|
|
|
205
257
|
if (rootHeight >= scrollerHeight) {
|
|
206
258
|
targetElement = weexRootFirstChild;
|
|
207
|
-
|
|
259
|
+
useChildrenTotalHeight = rootChildrenTotalHeight > rootFirstChildHeight;
|
|
260
|
+
elementDesc = useChildrenTotalHeight
|
|
261
|
+
? `.weex-root 的所有子元素总高度 (${rootChildrenTotalHeight}px)`
|
|
262
|
+
: `.weex-root 的第一个子元素 (高度: ${rootHeight}px)`;
|
|
208
263
|
} else {
|
|
209
264
|
targetElement = weexScrollerInner;
|
|
210
265
|
elementDesc = `.weex-scroller-inner (高度: ${scrollerHeight}px)`;
|
|
211
266
|
}
|
|
212
267
|
} else if (weexRootFirstChild) {
|
|
213
|
-
// 只找到 .weex-root
|
|
268
|
+
// 只找到 .weex-root 的第一个子元素，使用所有子元素的总高度
|
|
214
269
|
targetElement = weexRootFirstChild;
|
|
215
|
-
|
|
270
|
+
useChildrenTotalHeight = true;
|
|
271
|
+
const rootChildrenTotalHeight = this.calculateWeexRootChildrenHeight(weexRoot);
|
|
272
|
+
elementDesc = `.weex-root 的所有子元素总高度 (${rootChildrenTotalHeight}px)`;
|
|
216
273
|
} else if (weexScrollerInner) {
|
|
217
274
|
// 只找到 .weex-scroller-inner
|
|
218
275
|
targetElement = weexScrollerInner;
|
|
@@ -223,6 +280,10 @@ export default {
|
|
|
223
280
|
if (targetElement) {
|
|
224
281
|
console.log(`找到 ${elementDesc}，开始监听高度变化`, targetElement);
|
|
225
282
|
|
|
283
|
+
// 保存 weexRoot 引用和是否使用子元素总高度的标记
|
|
284
|
+
this._weexRoot = weexRoot;
|
|
285
|
+
this._useChildrenTotalHeight = useChildrenTotalHeight;
|
|
286
|
+
|
|
226
287
|
// 清除定时器，找到了就不再尝试
|
|
227
288
|
clearInterval(this._heightCheckTimer);
|
|
228
289
|
|
|
@@ -230,10 +291,24 @@ export default {
|
|
|
230
291
|
this.updateIframeHeightFromElement(targetElement);
|
|
231
292
|
|
|
232
293
|
// 使用 ResizeObserver 监听元素高度变化
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
294
|
+
// 如果使用子元素总高度，需要监听 weexRoot 的所有子元素
|
|
295
|
+
if (useChildrenTotalHeight && weexRoot) {
|
|
296
|
+
// 监听 weexRoot 本身的变化
|
|
297
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
298
|
+
this.updateIframeHeightFromElement(targetElement);
|
|
299
|
+
});
|
|
300
|
+
this._resizeObserver.observe(weexRoot);
|
|
301
|
+
|
|
302
|
+
// 同时监听所有子元素的变化
|
|
303
|
+
Array.from(weexRoot.children).forEach((child) => {
|
|
304
|
+
this._resizeObserver.observe(child);
|
|
305
|
+
});
|
|
306
|
+
} else {
|
|
307
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
308
|
+
this.updateIframeHeightFromElement(targetElement);
|
|
309
|
+
});
|
|
310
|
+
this._resizeObserver.observe(targetElement);
|
|
311
|
+
}
|
|
237
312
|
|
|
238
313
|
} else if (attempts >= maxAttempts) {
|
|
239
314
|
clearInterval(this._heightCheckTimer);
|
|
@@ -252,21 +327,59 @@ export default {
|
|
|
252
327
|
updateIframeHeightFromElement(element) {
|
|
253
328
|
if (!element) return;
|
|
254
329
|
|
|
255
|
-
|
|
256
|
-
|
|
330
|
+
let elementHeight = 0;
|
|
331
|
+
|
|
332
|
+
// 如果标记了使用子元素总高度，且 weexRoot 存在，计算所有子元素的总高度
|
|
333
|
+
if (this._useChildrenTotalHeight && this._weexRoot) {
|
|
334
|
+
elementHeight = this.calculateWeexRootChildrenHeight(this._weexRoot);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
// 如果子元素总高度为0或未使用，则使用元素本身的高度
|
|
338
|
+
if (elementHeight <= 0) {
|
|
339
|
+
elementHeight = element.offsetHeight || element.clientHeight || element.scrollHeight;
|
|
340
|
+
}
|
|
257
341
|
|
|
258
342
|
if (elementHeight > 0) {
|
|
343
|
+
// 限制最大高度，防止死循环
|
|
344
|
+
// 策略：使用 window.innerHeight 减去 iframe 距离视口顶部的距离
|
|
345
|
+
let maxHeight = window.innerHeight;
|
|
346
|
+
|
|
347
|
+
if (this.$refs.iframe) {
|
|
348
|
+
try {
|
|
349
|
+
const rect = this.$refs.iframe.getBoundingClientRect();
|
|
350
|
+
// 如果 top > 0，说明 iframe 顶部在视口下方或视口内，减去 top 得到剩余可用高度
|
|
351
|
+
// 如果 top <= 0，说明 iframe 顶部已滚出视口上方，此时最大高度限制为 window.innerHeight (防止无限增高)
|
|
352
|
+
if (rect.top > 0) {
|
|
353
|
+
maxHeight = window.innerHeight - rect.top;
|
|
354
|
+
}
|
|
355
|
+
} catch (e) {
|
|
356
|
+
console.warn('获取 iframe 位置失败:', e);
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
// 确保 maxHeight 不为负数
|
|
361
|
+
maxHeight = Math.max(maxHeight, 0);
|
|
362
|
+
|
|
363
|
+
// 如果计算出的高度超过了最大限制，则使用最大限制
|
|
364
|
+
const finalHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
|
|
365
|
+
|
|
259
366
|
// 更新包装器高度
|
|
260
367
|
if (this._wrapperEl) {
|
|
261
|
-
this._wrapperEl.style.height = `${
|
|
368
|
+
this._wrapperEl.style.height = `${finalHeight}px`;
|
|
262
369
|
}
|
|
263
370
|
|
|
264
371
|
// 更新 iframe 高度（考虑 weex scale）
|
|
265
|
-
const newHeight = `${
|
|
372
|
+
const newHeight = `${finalHeight / weex.config.env.scale}px`;
|
|
266
373
|
if (this.height !== newHeight) {
|
|
267
374
|
this.height = newHeight;
|
|
268
|
-
console.log(`iframe 高度已更新: ${
|
|
375
|
+
console.log(`iframe 高度已更新: ${finalHeight}px -> ${newHeight} (embedId: ${this.embedId}, max: ${maxHeight}px)`);
|
|
376
|
+
// 如果父级元素存在且符合条件，也给父级元素设置高度
|
|
377
|
+
if (this._parentElement) {
|
|
378
|
+
this._parentElement.style.height = `${finalHeight}px`;
|
|
379
|
+
}
|
|
269
380
|
}
|
|
381
|
+
|
|
382
|
+
|
|
270
383
|
}
|
|
271
384
|
},
|
|
272
385
|
handleGestureBubble(gestureData) {
|
|
@@ -326,6 +439,10 @@ export default {
|
|
|
326
439
|
this._heightCheckTimer = null;
|
|
327
440
|
}
|
|
328
441
|
|
|
442
|
+
// 清理引用
|
|
443
|
+
this._weexRoot = null;
|
|
444
|
+
this._useChildrenTotalHeight = false;
|
|
445
|
+
|
|
329
446
|
// 清理RAF避免内存泄漏
|
|
330
447
|
if (this._rafId) {
|
|
331
448
|
cancelAnimationFrame(this._rafId);
|
|
@@ -56,17 +56,13 @@
|
|
|
56
56
|
>
|
|
57
57
|
{{ item.label }}
|
|
58
58
|
</div>
|
|
59
|
-
<
|
|
60
|
-
class="edit-btn"
|
|
59
|
+
<img
|
|
61
60
|
@click.stop.prevent="() => onEditClick(item, index)"
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
alt="编辑"
|
|
68
|
-
/>
|
|
69
|
-
</button>
|
|
61
|
+
class="edit-icon"
|
|
62
|
+
:src="'data:image/png;base64,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'"
|
|
63
|
+
:style="{ width: scalePx(data.editBtnSize, 12) + 'px', height: scalePx(data.editBtnSize, 12) + 'px' }"
|
|
64
|
+
alt="编辑"
|
|
65
|
+
/>
|
|
70
66
|
</div>
|
|
71
67
|
</div>
|
|
72
68
|
</div>
|
|
@@ -463,7 +459,6 @@
|
|
|
463
459
|
font-weight:300
|
|
464
460
|
}
|
|
465
461
|
.label {
|
|
466
|
-
width: 100%;
|
|
467
462
|
text-align: center;
|
|
468
463
|
white-space: nowrap;
|
|
469
464
|
overflow: hidden;
|
|
@@ -473,15 +468,11 @@
|
|
|
473
468
|
width: 100%;
|
|
474
469
|
display: flex;
|
|
475
470
|
align-items: center;
|
|
471
|
+
flex-direction: row;
|
|
472
|
+
justify-content: center;
|
|
476
473
|
gap: 8px;
|
|
477
474
|
}
|
|
478
|
-
.edit-
|
|
479
|
-
margin-left: auto;
|
|
480
|
-
padding: 4px 8px;
|
|
481
|
-
border: none;
|
|
482
|
-
border-radius: 4px;
|
|
483
|
-
background: #f5f5f5;
|
|
484
|
-
color: #333;
|
|
475
|
+
.edit-icon {
|
|
485
476
|
}
|
|
486
477
|
.drag-clone {
|
|
487
478
|
box-sizing: border-box;
|