svelte - 触发事件以警告客户将其更改保存在 svelte

Question

我想警告用户在离开页面之前保存他的更改（表单更改）。如果他单击窗口上的任何位置，我想触发此警报。它可能是返回按钮或重新加载或页面上可用的任何导航链接。有人可以帮忙吗？

Answer 1

您应该在窗口上使用 'beforeunload' 事件，请参见此处

<svelte:window/>在 svelte 中，您使用特殊元素订阅窗口上的事件：

<script>

  let dirty = true; // document has changes to save

  function beforeUnload() {
    if (dirty) {
        event.preventDefault();
        event.returnValue = '';
        return '';
    }
  }

</script>

<svelte:window on:beforeunload={beforeUnload}/>