在一个页面的多个位置同时显示不同的Toastr提示信息

2024-05-09 20:59:29

背景

我想在同一个页面弹窗多个 toastr ，分别在不同的位置。

但是遇到了问题：无法弹出多个不同位置的 toastr 。即后续的 toastr （即使单独配置了positionClass），依然使用的是第一个位置配置。

问题分析

原本的 toastr ，当设置不同的位置时，后一次的弹窗位置与前一次的弹窗的消失时间有关，这在 Codepen 上有个演示。

Codepen上的效果展示

https://codepen.io/grantiverson/pen/GGMKzV

解决方案

Issue

在 toastr 源码中看到了有相关的 Issue：Fix using multiple positions at the same time #635 ，有小伙伴遇到了同样的问题。

而且这还通过 GitHub 上的一个PR解决了，修改后的 toastr 源码：

PullRequest

https://github.com/merlinoa/shinyFeedback/blob/23a4434aa12cc5e29f21abb090426f151cd320a1/inst/assets/toastr/js/toastr.min.js

效果展示

通过以上 toastr 的源码替换，我在这个小工具项目中实现了预期的想法。共涉及三个不同位置的弹窗：每次有消息时，左侧显示正常提示，右侧显示异常提示，当点击前两者时，中间弹出“复制成功”。

    let that = this;// error toastr with copy, righttoastr.options.positionClass = 'toast-top-right';toastr.options.timeOut = 0;toastr.options.extendedTimeOut = 0;toastr.options.closeButton = true;toastr.options.tapToDismiss = false;toastr.error("异常：出错了：<br />错误信息", null, {"onclick": function(event) {that.copy(event.target.innerHTML);}});// info toastr with copy, lefttoastr.options.positionClass = 'toast-top-left';toastr.options.timeOut = 0;toastr.options.extendedTimeOut = 0;toastr.options.closeButton = true;toastr.options.tapToDismiss = false;toastr.info("信息：按计划进行：<br />基本信息", null, {"onclick": function(event) {that.copy(event.target.innerHTML);}});// copy successfully message, centertoastr.options.positionClass = 'toast-top-center';toastr.options.timeOut = 2000;toastr.options.closeButton = false;toastr.success('复制成功');

Reference

Toastr文档
vue-clipboard2文档

If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!

在一个页面的多个位置同时显示不同的Toastr提示信息相关推荐

wordpress 独立 php,wordpress怎么把所有文章分类单独在一个页面显示
如何让wordpress把所有文章分类单独在一个页面显示? 1.复制一个page.php文件改为page-abc.php,并在WordPress后台新建一个页面,固定链接地址改为abc(这个abc可随 ...
原生css页面滑动到指定位置开始动画_html/css 滚动到元素位置，显示加载动画
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px.//左侧容器 .ite ...
使用uniapp实现锚点跳转，主按钮消失在视口时显示锚点按钮，点击锚点按钮页面返回主按钮位置
使用uniapp实现锚点跳转,主按钮消失在视口时显示锚点按钮,点击锚点按钮页面返回主按钮位置 onpagescroll页面滑动监听事件获取视口高度和按钮(btn-bg)距离顶部高,便可计算按钮离开视 ...
jq实现页面滑动到一定位置显示返回顶部按钮，点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
php重定向页面位置,php - PHP重定向到基于页面版本的用户位置（IPAPI），并在会话中记住 - SO中文参考 - www.soinside.com...
bounty到期在7天内.该问题的答案有资格获得+ 100声望赏金.John the Painter希望引起更多关注对此问题. 我正在尝试在head.inc文件中包含一些代码,该代码将检查该页面是否可 ...
JEECG 页面多个用户选择器只显示最后一个
在一个页面当中,我们可能会需要有多个的用户选择器进行快速的录入,此时会发现所有的输入都会在最后一个用户选择器的地方显示查看页面代码当中的ID也是不一致: 查看通过标签生成之后的源码,可以发现 ...
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端 1.声明一个editor数组: 2.将之前的编辑器显示行代码: 3.传递KindEditor所填写的相关数据: 今天使用Kind ...
CSS／JS 实现滑动页面，到一定位置，position 定位设置为fixed,否则用absolute;
当我滚动页面的时候,在可视区域的时候,我想让顶部的导航区域随着我页面的滚动一起滚动,但是当页面移动到一定位置的时候,如果还是使用postion:alsolute:来进行定位的话,顶部导航就回随着我页面 ...
点击按钮页面滚动到对应位置（锚点）
前言回到顶部,相信大家都不陌生吧,这个功能可谓是随处可见,也是作为一名前端开发工程师手到擒来的一个功能点.但前几天刚刚好有一个类似于回到顶部(锚点)的功能点把我卡住了,就是点击锚点按钮页面滚到对应位 ...
js控制页面滚动到指定位置，js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...

最新文章

热门文章