在 svelte 中单击弹出窗口外部时关闭模式弹出窗口

Question

我的一个 app.I 中有弹出模式，我想在 modal.I 外部单击时关闭此弹出窗口可以使用 javascript 实现此行为，但我不能完全找到一种使用 svelte framework.for 来完成这项工作的方法，现在我正在实现这样的行为

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

查看 Svelte on:clickOutside 事件的回购协议： https://github.com/babakfp/svelte-click-outside 它有一个从事件中排除元素的数组和一个 class 属性来设置包装器元素的样式。

在 svelte 中单击弹出窗口外部时关闭模式弹出窗口

Close modal popup while clicking outside of popup in svelte

svelte