mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-04-30 03:10:16 +08:00
fix(modal): 修复模态框滚动和点击事件处理
为多个模态框组件添加滚动和点击事件处理,防止背景滚动时内容滚动 当点击模态框背景时关闭模态框,同时阻止事件冒泡到内容区域
This commit is contained in:
@@ -11,9 +11,11 @@
|
||||
v-if="show"
|
||||
class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-6 lg:py-10"
|
||||
@wheel="onOverlayWheel"
|
||||
@click="onOverlayClick"
|
||||
>
|
||||
<div
|
||||
class="flex max-h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
|
||||
@click.stop
|
||||
>
|
||||
<UpdateCenterToolbar
|
||||
:search-query="store.searchQuery.value"
|
||||
@@ -85,4 +87,8 @@ const onOverlayWheel = (e: WheelEvent) => {
|
||||
if (target.closest(".overflow-y-auto, .overflow-auto")) return;
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const onOverlayClick = () => {
|
||||
props.store.requestClose();
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user