jeecg/jeecgboot-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

发现弹窗modal性能问题

Browse Source 
basicModal不设置maxHeight或height会一直执行setModalHeight，需即使销毁MutationObserver
This commit is contained in:
JEECG
2024-04-26 13:43:41 +08:00
parent 19d1e0ddbc
commit ffebec59bf
1 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Modal/src/components/ModalWrapper.vue
View File

@@ -45,16 +45,36 @@
useWindowSizeFn(setModalHeight.bind(null, false));
useMutationObserver(
spinRef,
() => {
setModalHeight();
},
{
attributes: true,
subtree: true,
}
);
// update-begin--author:liaozhiyang---date:2024-04-18---for：【QQYUN-9035】basicModal不设置maxHeight或height会一直执行setModalHeight，需即使销毁MutationObserver
let observer,
recordCount: any = {};
if (!(props.maxHeight || props.height)) {
observer = useMutationObserver(
spinRef,
() => {
setModalHeight({
source: 'muob',
callBack: (height) => {
const count = recordCount[height];
if (count) {
recordCount[height] = ++recordCount[height];
if (count > 5) {
observer.stop();
recordCount = null;
}
} else {
recordCount[height] = 1;
}
},
});
},
{
attributes: true,
subtree: true,
}
);
}
// update-end--author:liaozhiyang---date:2024-04-18---for：【QQYUN-9035】basicModal不设置maxHeight或height会一直执行setModalHeight，需即使销毁MutationObserver
createModalContext({
redoModalHeight: setModalHeight,
@@ -124,7 +144,11 @@
});
}
async function setModalHeight() {
async function setModalHeight(option?) {
console.log("---------性能监控--------setModalHeight----------")
const options = option || {};
const source = options.source;
const callBack = options.callBack;
// 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
// 加上这个,就必须在使用的时候传递父级的visible
if (!props.visible) return;
@@ -163,6 +187,12 @@
} else {
realHeightRef.value = props.height ? props.height : realHeight > maxHeight ? maxHeight : realHeight;
}
// update-begin--author:liaozhiyang---date:2024-04-18---for：【QQYUN-9035】basicModal不设置maxHeight或height会一直执行setModalHeight，需即使销毁MutationObserver
if (source == 'muob') {
callBack(realHeightRef.value);
}
// update-end--author:liaozhiyang---date:2024-04-18---for：【QQYUN-9035】basicModal不设置maxHeight或height会一直执行setModalHeight，需即使销毁MutationObserver
emit('height-change', unref(realHeightRef));
} catch (error) {
console.log(error);