GetUIkIt 3 通知关闭事件？

Question

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

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

例如

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

我试过将通知放在一个变量上，（按照建议 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。

我能想到的唯一其他方法是将突变观察器放在 body 上并观察通知元素以更改状态，但这似乎有点过分了。

Answer 1

你可以试试这个

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

看到这个Pen

Answer 2

有点Hacky，但以下内容似乎"work"：

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>

Answer 3

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

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.

GetUIkIt 3 通知关闭事件？

GetUIkIt 3 Notification Close event?

javascript

getuikit