单击另一个时隐藏 Snackbar

Question

这是我使用 Material Design Lite 组件库的三个 Snackbars 的代码：

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button1');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #1',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button2');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #2',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button3');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #3',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

现在我想在单击另一个 Snackbar 时隐藏一个 Snackbar。目前，一旦 6000 毫秒结束，就会一个接一个地显示 div。你能帮我解决这个问题吗？非常感谢！

Answer 1

在当前版本的 Material Design lite 中，您可以调用

mySnackbar.MaterialSnackbar.cleanup_();

它会顺利隐藏。

Answer 2

我也遇到过这个问题。经过一番挖掘，我想出了一个小技巧。

使用以下代码更新当前通知以获取新通知。

将您通常使用snackbarContainer.MaterialSnackbar.showSnackbar(data); 的位置替换为：

snackbarContainer.MaterialSnackbar.cleanup_();
setTimeout(function(){
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
}, snackbarContainer.MaterialSnackbar.Constant_.ANIMATION_LENGTH)

我是 javascript 新手，但它似乎对我有用。

编辑：这似乎不是一个万无一失的方法，当上一个通知的超时到期时，它会关闭新的通知。我还没有答案。

编辑 2：不是万无一失，但可以让您继续前进，您需要对 material.js 进行一些更改才能使其正常工作：

更改 1：MaterialSnackbar = function MaterialSnackbar(element) 中的某处

变更2：MaterialSnackbar.prototype.cleanup_开头

更改 3：用这个替换您的邮政编码。

    snackbarContainer.MaterialSnackbar.cleanup_();
    snackbarContainer.MaterialSnackbar.skipClearing++;
    setTimeout(function(){
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }, snackbarContainer.MaterialSnackbar.Constant_.ANIMATION_LENGTH)

我希望这会有所帮助。

Answer 3

有一个稍微老套的方法来完成这个。

var snackbarContainer = document.querySelector('#toast');

让我们定义一个处理程序来处理隐藏小吃栏的回调，

var handler = function(event) {
    snackbarContainer.classList.remove('mdl-snackbar--active');
    snackbarContainer.setAttribute("aria-hidden", "true");
};

现在，让我们将小吃栏显示如下，

var data = {
    message: 'Snack time!',
    timeout: 2000,
    actionHandler: handler,
    actionText: 'Dismiss'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);

就是这样！

Answer 4

鉴于此 SnackBar 组件提供的 API，只能显示警报而无法隐藏它。我建议要么切换到更好的组件（这个组件过于简单），要么通过创建一个在显示新警报之前直接销毁所有现有警报的函数来绕过它。