Question

我有一个react组件，如果用户调整屏幕大小，则会包装一些在1024px以下的屏幕上不可用的内容，将触发一个事件，打开一个只能关闭它的面包，但如果用户调整分辨率再次，我想自动关闭此吐司。是否有一种方法可以强制特定的烤面包关闭以分配某种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

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

管理警告方法现在返回烤面包本身

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);
}

现在，消费者可以保存此吐司的参考

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标记特定的敬酒。

如果您只想显示一个烤面包，并且想要清除它（或所有显示的烤面包），则只需使用

toastr.clear();

如果您有可能显示多个烤面包并且想要删除特定的烤面包的情况，则可以使用以下方法获得烤面包容器

$('#toast-container');

或者通过以下方式获取所有烤面包的数组

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

一旦有了，就可以找到您想要的吐司，并使用.remove（）;

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

希望这会有所帮助

是否有办法通过外部事件来结束敬酒？

2 个答案: