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>

Answer 2

查看 Svelteon:clickOutside事件的这个 repo： https ://github.com/babakfp/svelte-click-outside 它有一个用于从事件中排除元素的数组和一个用于设置包装器元素样式的类 prop。