svelte - 在 Svelte 中单击弹出窗口外部时关闭模态弹出窗口

Question

我的一个应用程序中有弹出模式。我想在单击模式外部时关闭此弹出窗口。我可以使用 javascript 实现此行为，但我无法找到使用 svelte 框架使其工作的方法。现在我正在实现这样的行为

if(e.target.classList.contains('my-modal')){
     e.target.style.display="none";
 }

但我想使用 svelte 来完成这项工作。

Answer 1

解决这个问题的一个常见方法是在模态后面有一个背景元素覆盖屏幕并拦截点击事件:https://svelte.technology/repl?version=1.57.1&example=modal-with-slot

这也是(例如)淡出背景以使模态更加可见的好方法。

另一种方法是使用特殊的 <:Window>组件来监听点击，并停止在模态内开始的任何点击的传播:https://svelte.technology/repl?version=1.57.1&gist=ba5f8a78263f2cdfbc16b1ae8732da5d

<:Window on:click='set({ message: "clicked outside the box" })'/>

<div class='clickzone' on:click='event.stopPropagation()'>
  <div class='inner' on:click='set({ message: "clicked inside the box" })'>
    {{message}}
  </div>
</div>