Vue3中多个弹窗同时出现的解决思路
更新时间：2024年02月29日 09:35:30 作者：前端小王hs
这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
弹窗或者说对话框是我们在开发系统或者页面很常用的元素，所以博主想对出现多个弹窗的情况下的解决思路进行一个整理
有时候我们一个页面可能存在多个弹窗，当多个弹窗出现的时候可能屏幕就变的很黑
如下图所示：
取消遮罩层
对此我们可以使用组件原生的属性modal去取消遮罩层
但问题是
如果存在两个一样大小的弹窗
比如我在一个500pxX500px的弹窗中有一个按钮
是打开另一个大小为500pxX500px的弹窗
但是我又想存在一层遮罩层（按情况此时是两层遮罩层）以表示目前是打开了弹窗，面对这种情况我们应该怎么解决呢？
打开一层弹窗的同时隐藏另一个弹窗
我们可以给第一个打开的弹窗设置一个display:none属性
思路如图所示：
弹窗冒泡如何解决
这个需求的存在是一个比较特殊的情况，如果存在一个页面，点击这个页面的任何地方都会打开一个弹窗，同时这个页面中有一个按钮可以打开另一个弹窗
如下图所示：
这个情况我们就可以在button的绑定函数中加上.stop，即
<button @click.stop='打开弹窗' />
这样的话就不会出现两个弹窗了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-router判断页面未登录自动跳转到登录页的方法示例
这篇文章主要介绍了vue-router判断页面未登录自动跳转到登录页的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue单页应用加百度统计代码的解决方法，需要的朋友参考下吧2018-01-01
Vue Baidu Map之自定义点图标bm-marker的示例
这篇文章主要介绍了Vue Baidu Map之自定义点图标bm-marker,文中给大家介绍了vue-baidu-api地图标记点（自定义标记图标），设置标记点的优先级问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-08-08
这篇文章主要介绍了解决vue内存溢出报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了在Vue项目中是否使用store原理深究，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家介绍了Vue之监听数据的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2021-11-11
我们在开发过程中经常需要监听用户的输入,比如用户的点击事件、拖拽事件、键盘事件等等,这篇文章主要给大家介绍了关于Vue监听键盘事件实用示例的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue 组件中添加样式不生效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家介绍了Vue中如何优雅的捕获 Promise 异常详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue 折叠展示多行文本组件，自动根据传入的expand判断是否需要折叠，非常完美，文章通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2021-10-10
最新评论