如何在几秒钟后关闭模态组件？答案

【问题标题】：How to close a modal component after some seconds?如何在几秒钟后关闭模态组件？
【发布时间】：2023-01-20 23:29:06
【问题描述】：

我创建了一个由 svelte store 控制的模式。

//store.js
export let modal = writable({
    show: false,
    message: 'This is a simple modal... will update the message before shows to user'
})


//Modal.svelte

<script>
    import { afterUpdate, beforeUpdate, onMount} from 'svelte';

    beforeUpdate(() => {
        setTimeout(() => {
            $modal.show = false
    }, 4000)
    })
</script>


{#if $modal.show}
    <div class="fixed">
        {$modal.message}
    </div>
{/if}

第一次更新后，它关闭速度非常快，不考虑 4000 毫秒。我做错了什么？有没有更好的方法来制作通知模式？

【问题讨论】：

标签： svelte sveltekit svelte-3 svelte-store

【解决方案1】：

如果你有一个商店，你只能有一个模态实例。 show 应该只是 Modal 组件的一个属性，而不是一个单独的商店。

还有beforeUpdate是不是你应该使用什么，它会触发任何和所有状态变化。计时器管理可能应该在组件外部或封装在可以按需调用的导出函数中。这取决于为什么延迟首先应该存在。

【讨论】：