有没有办法用外部事件来结束敬酒？

Question

我有一个反应组件，它包含一些内容，如果用户调整屏幕大小，它在 1024 像素以下的屏幕中不可用，一个事件将被触发，打开一个只能关闭点击它的 toast，但如果用户调整分辨率大小再次我想自动关闭这个吐司。 有没有办法强制特定的 toast 关闭分配某种 id 以找到它并使用 javascript 单击它？

// this calls a generic function that opens a toast.
manageWarning('', 'You are running on a small screen resolution, this feature it\'s only available on screens up to 1024 px, please scale up the window again', true);

// This is the generic function
export function manageWarning(id, message, disableAutoClose) {
    toastr.options.timeOut = disableAutoClose ? 0 : Global.MESSAGE_ERROR_DURATION;
    toastr.options.extendedTimeOut = disableAutoClose ? 0 : toastr.options.extendedTimeOut;
    toastr.warning(message);
}

Answer 1

我设法通过对我的代码库进行一些更改来修复它。

manage 警告方法现在返回 toast 本身

export function manageWarning(id, message, disableAutoClose) {
    toastr.options.timeOut = disableAutoClose ? 0 : Global.MESSAGE_ERROR_DURATION;
    toastr.options.extendedTimeOut = disableAutoClose ? 0 : 
    toastr.options.extendedTimeOut;
    return toastr.warning(message);
}

现在消费者可以保存这个 toast 的引用

this.toast = manageWarning('', 'You are running on a small screen resolution, this feature it\'s only available on screens up to 1024 px, please scale up the window again', true);

考虑到这一点，我现在可以简单地调用

this.toast.fadeIn(); // Method to show the toast again.
this.toast.fadeOut(); // Method close the toast.

Answer 2

据我所知，没有办法使用插件的默认行为用 ID 标记特定的 toast。

如果您只想显示一个 toast 并且想要清除它（或所有显示的 toast），那么只需使用

toastr.clear();

如果您有可能显示多个 toast 并且想要删除特定 toast 的场景，那么您可以使用获取 toast 容器

$('#toast-container');

或者获取所有toasts的数组

$('#toast-container').children();

一旦你有了它，你就可以找到你的特定吐司并使用 .remove();

$('#toast-container').children()[1].remove();

希望对你有帮助