Vue3中多个弹窗同时出现的解决思路
更新时间：2024年02月29日 09:35:30 作者：前端小王hs
这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
弹窗或者说对话框是我们在开发系统或者页面很常用的元素，所以博主想对出现多个弹窗的情况下的解决思路进行一个整理
有时候我们一个页面可能存在多个弹窗，当多个弹窗出现的时候可能屏幕就变的很黑
如下图所示：
取消遮罩层
对此我们可以使用组件原生的属性modal去取消遮罩层
但问题是
如果存在两个一样大小的弹窗
比如我在一个500pxX500px的弹窗中有一个按钮
是打开另一个大小为500pxX500px的弹窗
但是我又想存在一层遮罩层（按情况此时是两层遮罩层）以表示目前是打开了弹窗，面对这种情况我们应该怎么解决呢？
打开一层弹窗的同时隐藏另一个弹窗
我们可以给第一个打开的弹窗设置一个display:none属性
思路如图所示：
弹窗冒泡如何解决
这个需求的存在是一个比较特殊的情况，如果存在一个页面，点击这个页面的任何地方都会打开一个弹窗，同时这个页面中有一个按钮可以打开另一个弹窗
如下图所示：
这个情况我们就可以在button的绑定函数中加上.stop，即
<button @click.stop='打开弹窗' />
这样的话就不会出现两个弹窗了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue简单实现书本翻页效果,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue如何通过props方式在子组件中获取相应的对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3 DOM是Vue.js框架的一部分，用于处理与浏览器DOM相关的操作，它提供了一组API和工具，使开发者能够轻松地操作和管理DOM元素，本文给大家介绍了Vue3获取元素DOM的两种方法：ref模板引用和传统方法，并有详细的代码示例,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了详解vue 项目白屏解决方案，详细的介绍了白屏的解决方案，非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了Vue如何比较字符串变化并高亮变化的部分问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了Vue3.0中如何监听props方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在现代 Web 开发中,定时刷新页面或定时更新数据是一种常见的需求,尤其是在需要与服务器进行定时通信或者展示实时数据的场景下,Vue.js 提供了简单而有效的方法来实现定时刷新和自动更新,本文将介绍几种常见的定时刷新方式、适用场景、优缺点以及性能考虑2024-11-11
这篇文章主要介绍了过滤器vue.filters的使用方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
vue项目打包是我们日常经常遇到的,下面这篇文章主要给大家介绍了关于Vue打包后不同版本详细解析的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue组件间的通信pubsub-js实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
最新评论