Uikit 通知完成然后导航到另一个页面

Question

我想弹出一个通知然后导航到登录页面。

UIkit.notification({message: 'no access, please login again', status: 'danger'});
this.router.navigateByUrl('login'); // angular navigation by url

但是它会弹出消息并同时导航到登录页面。我想要的是等待通知关闭然后进行导航。

如果我们只有通知的第一行代码，弹窗window默认会在5秒后消失。在我的代码中有两行，弹出窗口 window 很快消失然后运行第二行代码。

Answer 1

您可以使用纯 UIkit 实现此目的。通知组件在关闭时触发 close event，您可以将其用于自定义功能。要运行仅针对特定错误通知的功能，您可以添加自己的自定义 class（在我的示例中为 login-error）。

UIkit.notification({
  message: 'no access, please login again',
  status: 'danger login-error'
});


UIkit.util.on('.login-error', 'close', function() {
  console.log('Notification closed');
  //this.router.navigateByUrl('login'); // angular navigation by url
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/js/uikit-icons.min.js"></script>

Uikit 通知完成然后导航到另一个页面

Uikit Notification finish then navigate to another page

javascript

typescript

getuikit