第三方工具隐藏Toast弹出
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第三方工具隐藏Toast弹出相关的知识,希望对你有一定的参考价值。
参考技术A 1.集成环信实现聊天室功能时,每当有用户进入和离开聊天室总会弹出Toast,怎么隐藏掉呢?在环信的Demo包里,找到xxxHXSDKHelper.java文件,在里面把监听回调的Toast注释掉即可。
或者使用Find in Path-》输入member,找到环信下的所有Toast,注释掉。
2.在使用友盟进行社会化分享时,总会弹出“开始分享...”、“分享中...”、“分享成功...”这样的Toast,如果要注释掉,可以在加mController.getConfig().closeToast();
“微信提示:大于32k 压缩图片”时,加UMWXHandler.showCompressToast(false);即可。
Bootstrap 5 工具提示、弹出框和 toast 在 Ruby on Rails 6 中不起作用
【中文标题】Bootstrap 5 工具提示、弹出框和 toast 在 Ruby on Rails 6 中不起作用【英文标题】:Bootstrap 5 tooltip, popover and toasts not working in Ruby on Rails 6 【发布时间】:2021-02-22 22:15:42 【问题描述】:我正在使用 Railsbytes 脚本安装 bootstrap 5 alpha; https://railsbytes.com/public/templates/VB0s5v.
但是,我无法使用任何工具提示和弹出框。甚至不确定我应该把脚本放在哪里,或者我是否必须添加任何东西才能启用它们。任何人都请如此友善并提供一些指导。非常感谢!
/雅各布
我怀疑我需要根据https://v5.getbootstrap.com在某处添加的js示例:
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl)
return new bootstrap.Tooltip(tooltipTriggerEl)
)
【问题讨论】:
【参考方案1】:我也为此苦苦挣扎,但现在已经让他们工作了。这是我让 Bootstrap5 与 Rails6 一起工作的工作流程。
yarn add bootstrap@next
yarn add @popperjs/core
创建文件app/javascript/stylesheets/application.scss
我将在其中添加自定义css
将以下内容添加到新文件的顶部:
# app/javascript/stylesheets/application.scss
@import "bootstrap"
为了让应用程序从 javascripts 文件夹中导入您的自定义 css,请将以下内容添加到您的应用程序布局文件中添加 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
。 pack_tag 表示这将由 webpacker 处理。布局文件将如下所示:
# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
最后为了让一切正常工作,将以下内容添加到 app/javascript/packs/application.js 的底部
# app/javascript/packs/application.js
import * as bootstrap from 'bootstrap'
import "../stylesheets/application"
document.addEventListener("DOMContentLoaded", function(event)
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl)
return new bootstrap.Popover(popoverTriggerEl)
)
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl)
return new bootstrap.Tooltip(tooltipTriggerEl)
)
);
作为测试,我随后将以下 Bootsrap 组件添加到我的主页(或任何要测试的页面):
# index.html.erb
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
【讨论】:
哦,谢谢! :)以上是关于第三方工具隐藏Toast弹出的主要内容,如果未能解决你的问题,请参考以下文章