svelte toast bootstrap 仅在第二个事件后触发

Question

事件仅有时触发，通常是在第二次点击相同类型后。

因此，如果执行 1x 添加新的、1x 更新的、1x 删除的等操作，toast 更有可能不会触发...

但是如果相同的动作多次，比如 5x 添加新的，它会在第二次之后触发

...

// toast notify
import { Toast } from "bootstrap";

let toastEl;
let opc = { text: "", color: "" };

const mostrarMensaje = (text, color) => {
    opc = {
        text: text,
        color: color,
    };
    new Toast(toastEl).show();

};


...
        <!-- Toast notify -->
        <div class="toast-container position-absolute top-0 end-0 p-3">
            <div
                bind:this={toastEl}
                class="toast align-items-center text-dark bg-{opc.color}"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
            >

示例代码url： https://svelte.dev/repl/04e5e8a7511b44aca203adeb5817f204?version=3.48.0

Answer 1

问题在于您在 toast 中设置背景颜色的方式：

class="toast align-items-center text-dark bg-{opc.color}"

最初，当组件第一次被渲染时（即使它没有显示），opc.color是一个空字符串，使得最后的class在您的定义中 bg-，这是无效的。

如果您最初将 opc.color 设置为 "success"，您将在添加第一个待办事项时看到 toast 正确显示。但是这不是解决方案，因为您执行其他操作、删除和更新后问题仍然存在。

解决方案是利用 Svelte 的 class: 表示法向 toast 添加条件 classes div:

class="toast align-items-center text-dark"
class:bg-success={opc.color === "success"}
class:bg-danger={opc.color === "danger"}
class:bg-warning={opc.color === "warning"}

这样，将根据 opc.color 的当前值附加正确的 class。

Working REPL

旁注：您将在链接的 REPL 中看到我删除了添加、删除和更新函数的响应式声明。这些 不需要 是反应式的，应该声明为正常的 functions/arrow 函数。

svelte toast bootstrap 仅在第二个事件后触发

svelte toast bootstrap fired only after second event

bootstrap-4

bind

svelte

toast