ruby - 如何使 Rails 中的 Flash 消息超时

Question

我目前有用于成功/失败等的设计 gem 的标准 flash 消息。我添加了通过关闭类使用一些引导功能手动关闭消息的选项。下面显示了一个小片段。

{ 
  <a class="close" data-dismiss="alert">&#215;</a>
  <%= content_tag :div, msg, :id => "flash_#{name}" %>
}

我想有一个选项来创建一个超时时间段，在该时间段内警报消息将在 5 秒后关闭。不确定在 Rails 中是否有一种简单的方法可以做到这一点。

谢谢

Answer 1

如果您在同一页面中加载了 jQuery，这将适用于您

<div id="flash">
  <a class="close" data-dismiss="alert">&#215;</a>
  <%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>

<script type="text/javascript">
$(document).ready(function(){
  setTimeout(function(){
    $('#flash').remove();
  }, 5000);
 })
</script>

Answer 2

在 Rails 6 中使用 vanilla Javascript（将代码放入 中app/javascript/packs/application.js），我使用以下内容淡化带有'.notification'类的 flash 消息。

首先，notification在您的 html 中添加一个类。然后，在 CSS 中，将.notificationopacity 设置为 1 并transition设置为ease-in-out. 然后，使用 JS，将.fade类添加到.notification，将不透明度设置为 0。

JS

window.addEventListener("turbolinks:load", () => {
  hideNotice();
});

function hideNotice() {
  const notification = document.querySelector('.notification')
  if (notification) {
    setInterval(function() {
      notification.classList.add('fade');
    }, 5000);
  }
}

CSS

.notification {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.notification.fade {
  opacity: 0;
}

Answer 3

1. 确保您的 div 有一个alert类。
2. application.js在您的文件或其他文件中添加以下代码.js：

$(document).on('turbolinks:load', function() {
  setTimeout(function() {
    $('.alert').fadeOut();
  }, 3000);
})

3. 看着它走开。