Question

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

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

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

如果我们只有通知的第一行代码，则默认情况下，弹出窗口将在5秒钟内消失。在我的代码中，有两行代码，弹出窗口迅速消失，然后运行第二行代码。

Answer 1

您可以使用纯UIkit来实现。通知组件在关闭时会触发close event，可将其用于自定义功能。要仅在特定的错误通知上运行该功能，可以添加自己的自定义类（在我的示例中为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通知完成，然后导航到另一个页面

1 个答案: