如何将toast rails gem添加到Rails6项目中

我正在尝试将toast gem添加到我的Rails 6项目中。我还安装了设计宝石。

我不了解webpacker以及如何使烤面包机轨道webpacker友好。

我已经阅读了所有的文件。不要让我看文件。

这就是我尝试过的：

yarn add toastr

然后在我的assets/packs/application.js文件中，我添加了：

@import 'toastr'

在我的assets/stylesheets/application.scss文件中，我添加了：

*= require_toastr

最后，我的layouts/application.html.erb有这样的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<% unless flash.empty? %>
<script type="text/javascript">
<% flash.each do |f| %>
<% type = f[0].to_s %>
toastr['<%= type %>']('<%= f[1] %>');
<% end %>
</script>
<% end %>
<%= yield %>
</body>
</html>

我没有收到祝酒词通知。我没有收到任何通知。但这段代码适用于我的Rails 4项目。

如果您想添加带有toast rails gem的toast，请使用资产管道而不是webpack。

以下是将toastr与webpack相加的步骤。

添加带有纱线的烤面包机js
```
yarn add toastr
```
需要app/javascript/packs/application.js中的toast。我将其添加到全局以避免错误
```
global.toastr = require("toastr")
```
创建app/javascript/stylesheets/application.scs文件以导入自定义或库css文件
在app/javascript/stylesheets/application.scss中导入toast css
```
@import 'toastr'
```
在app/javascript/packs/application.js中导入app/javascript/stylesheets/application.scs文件
```
import "../stylesheets/application"
```

我为flash消息编写了一个助手方法。将此方法添加到application_help.rb或其他助手

def toastr_flash
flash.each_with_object([]) do |(type, message), flash_messages|
type = 'success' if type == 'notice'
type = 'error' if type == 'alert'
text = "<script>toastr.#{type}('#{message}', '', { closeButton: true, progressBar: true })</script>"
flash_messages << text.html_safe if message
end.join("n").html_safe
end

将toastr_flash方法添加到layouts/application.html.erb或任何需要的位置

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<%= yield %>
<%= toastr_flash %>
</body>
</html>

首先，您需要将toast添加到您的项目中

使用纱线

yarn add toastr

使用npm

npm -i toastr

之后，您可以在node_modules中看到文件toast(node_modules/tooter(，其中包含toast.scss文件和toast.js文件，好吧，让我们导入它

app/assets/application.scss

@import "toastr/toastr";

app/javascripts/packs/application.js

toastr = require("toastr")

或

import toastr from 'toastr/toastr';

相关内容

最新更新

热门标签：