fix(modal): 修复模态框滚动和点击事件处理

为多个模态框组件添加滚动和点击事件处理,防止背景滚动时内容滚动
当点击模态框背景时关闭模态框,同时阻止事件冒泡到内容区域
This commit is contained in:
2026-04-12 21:34:51 +08:00
parent ba10f90dde
commit ca7520cb2e
5 changed files with 27 additions and 2 deletions
+7
View File
@@ -11,6 +11,7 @@
v-if="show"
class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10"
@click.self="$emit('close')"
@wheel="onOverlayWheel"
>
<div
class="flex w-full max-w-4xl max-h-[85vh] flex-col rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
@@ -193,4 +194,10 @@ defineEmits<{
(e: "uninstall", app: App): void;
(e: "switch-origin", origin: "apm" | "spark"): void;
}>();
const onOverlayWheel = (e: WheelEvent) => {
const target = e.target as HTMLElement;
if (target.closest(".overflow-y-auto, .overflow-auto")) return;
e.preventDefault();
};
</script>