前端每日一撸|如何解决mint-ui,toast显示重叠的问题

关注公众号“AI码师”领取2021最新面试资料一份

问题背景

我们的app H5是使用vue+mint-ui框架开发，消息弹出是使用toast组件来完成的，最近遇到了一个问题就是，我们在一个功能上，重复点击触发了某个事件，会一直调用toast组件弹出提示消息，我们期望的结果当然是后者会替换前者的，但是实际上却是消息会进行重叠，达不到我们预期的效果，当然，在我一番思索之后，找出来如下的解决方案：

解决方案

因为我们使用的vue框架搭建的，所以我所有的逻辑操作都是在main.js中处理的。 在main.js中封装一个全局的$toast方法绑定在vue对象上，代码如下：

import { Toast } from 'mint-ui'; Vue.prototype.$toast = (msg) => { Toast(msg); };

目前还只是完成了封装消息组件提示的功能，现在我们只需要引入一行牛逼的代码，就结束了我们今天的分享内容

import { Toast } from 'mint-ui'; import $ from 'jquery'; Vue.prototype.$toast = (msg) => { $('.is-placemiddle').remove(); Toast(msg); };

没错，只用加下这段代码，就能解决toast重叠的问题了，至于为什么，大家可以看下弹出组件的源码，跟踪进去就知道其中的原理了

今天分享的内容到此结束，我们下一期再见吧。文末附赠视频教程和面试资料。

关注公众号“AI码师”领取2021最新面试资料一份思考得越多的时候，你就会越清楚地看到，你知道得很少。——伏尔泰

创作打卡挑战赛 赢取流量/现金/周边激励大奖