如何自定义通知的外观 - toastr-rails答案

【问题标题】：How can I customize the look of the notifications - toastr-rails如何自定义通知的外观 - toastr-rails
【发布时间】：2016-07-31 19:04:17
【问题描述】：

我正在尝试自定义吐司的位置。

我试过这样做，但它不起作用：

applications.js

//= require jquery
    //= require toastr
    //= require jquery_ujs
    //= require turbolinks
    //= require_tree .

    $(document).ready(function() {


     toastr.options = {
                      "closeButton": false,
                      "debug": false,
                      "positionClass": "toast-bottom-right",
                      "onclick": null,
                      "showDuration": "300",
                      "hideDuration": "1000",
                      "timeOut": "5000",
                      "extendedTimeOut": "1000",
                      "showEasing": "swing",
                      "hideEasing": "linear",
                      "showMethod": "fadeIn",
                      "hideMethod": "fadeOut"
                  }

    });

我正在使用 rails 5，有人知道为什么它不起作用吗？提前谢谢。

【问题讨论】：

标签： ruby-on-rails toastr

【解决方案1】：

你使用 toastr-rails 吗？

我试过用它，但我做不到，所以现在我直接使用 toastr：https://github.com/CodeSeven/toastr

只需添加 application.js 并创建一个这样的部分：

<% unless flash.empty? %>
<script type="text/javascript">
    <% flash.each do |f| %>
        <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info') %>
        toastr['<%= type %>']('<%= f[1] %>', '', {"closeButton": false, "debug": false, "positionClass": "toast-bottom-full-width", "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" });
    <% end %>
</script>

请注意，选项是内嵌在代码中的。

【讨论】：

请注意，您需要确保在toastr js和css文件完全加载后运行

【解决方案2】：

toastr-rails 现在已经过时了，我强烈建议单独添加 toastr。如果你使用的是 Rails 5+，你可以用 yarn 添加 toastr：

yarn add toastr

当然，您仍然可以下载toastr，也可以复制并粘贴到资产中 - 如果您没有 yarn。

然后添加一个助手：

module FooHelper
  def toastr_flash_class(type)
    case type
    when "alert"
      "toastr.error"
    when "notice"
      "toastr.success"
    else
      "toastr.info"
    end
  end
end

创建一个部分，例如_toaster.html.erb

<%= content_tag(:script) do %>
  <% flash.each do |type, message| %>
    <%= toastr_flash_class("#{type}") %>('<%= message %>')
  <% end %>
<% end %>

从您的布局或视图中调用您的部分：

<%= render 'layouts/shared/toastr' %>

【讨论】：

【解决方案3】：

我知道这篇文章有点老了，但如果其他人将来偶然发现它，下面是我如何让 toastr 在我的 gem 文件中使用 gem 'toastr-rails' 工作。

//= require jquery
//= require jquery_ujs
//= require toastr
//= require_tree .

/*global toastr*/
toastr.options = {
  "closeButton": false,
  "debug": false,
  "positionClass": "toast-bottom-right",
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

对我来说，我需要添加 /*global toastr*/ 行，因为我收到一个控制台错误，告诉我一些类似于“toastr”不是变量的内容。然后你可以使用任何你想要的选项。不要忘记将*= require toastr 也添加到您的 application.css 文件中。

再次，希望这对将来的某人有所帮助。

【讨论】：