Question

我需要知道UIKit通知何时关闭。

UIkit通知插件（https://getuikit.com/docs/notification）提到它有一个关闭事件。是否可以将此用于以编程方式触发的实例？

e.g。

UIkit.notification({
    message: 'my-message!',
    status: 'primary',
    timeout: null
});
UIKit.o

我已经尝试将nofication放在一个变量上（如建议的https://getuikit.com/docs/javascript#programmatic-use，它甚至指出You'll receive the initialized component as return value - 但你不是

let foo = UIkit.notification('message'); // foo is undefined

我已尝试将on方法链接

UIkit.notification.on('close', function() { ... }); // on is undefined

但是.on方法是UIkit.util.on($el, event, fn)的一部分，并且在以编程方式调用通知时没有$el。

我能想到的唯一另一种方法是将突变观察者放在身体上并注意通知元素以改变状态，但这看起来有点过分。

Answer 1

你可以试试这个

UIkit.util.on(document, 'close', function() { alert('Notification closed'); });

请参阅此Pen

Answer 2

您可以存储通知的句柄...

warning_notification = UIkit.notification({message: 'Warning message...',
                                           status: 'warning', timeout: 1000});

...并检查这是否是关闭事件的起源：

UIkit.util.on(document, 'close', function(evt) {
  if (evt.detail[0] === warning_notification) {
    alert('Warning notification closed');
  }
});

现在，只有在完全关闭此通知后，您才会看到警报。

Check out this demo。

Answer 3

有点hacky，但以下内容似乎“起作用”：

function notify(){
  var params = Array.prototype.slice.call(arguments);
  new_f = params.shift()
  foo = UIkit.notification.apply(this, params);
  return function(foo, new_f, old_f){
    foo.close = function(){new_f(); foo.close = old_f; old_f.apply(this, arguments); }
    return foo
  }(foo, new_f, foo.close);
}

notify(function(){alert('ok');}, 'message');

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.9/js/uikit.js"></script>

GetUIkIt 3通知关闭事件？

3 个答案: