Vue3多个弹窗同时出现解决思路
创始人
2024-04-15 11:06:29
0次
Vue3多个弹窗同时出现解决思路
弹窗或者说对话框是我们在开发系统或者页面很常用的元素，所以博主想对出现多个弹窗的情况下的解决思路进行一个整理
有时候我们一个页面可能存在多个弹窗，当多个弹窗出现的时候可能屏幕就变的很黑，如下图所示
取消遮罩层
对此我们可以使用组件原生的属性modal去取消遮罩层
但问题是如果存在两个一样大小的弹窗，比如我在一个500pxX500px的弹窗中有一个按钮，是打开另一个大小为500pxX500px的弹窗，但是我又想存在一层遮罩层（按情况此时是两层遮罩层）以表示目前是打开了弹窗，面对这种情况我们应该怎么解决呢？
打开一层弹窗的同时隐藏另一个弹窗
我们可以给第一个打开的弹窗设置一个display:none属性
思路如图所示：
弹窗冒泡如何解决
这个需求的存在是一个比较特殊的情况，如果存在一个页面，点击这个页面的任何地方都会打开一个弹窗，同时这个页面中有一个按钮可以打开另一个弹窗，如下图所示：
这个情况我们就可以在button的绑定函数中加上.stop，即
这样的话就不会出现两个弹窗了
感谢读者们的阅读
如在开发问题中遇到问题，可私聊博主或加博主微信进行交流
相关内容
热门资讯
国家发展改革委：地方要建立消费...
中国青年报客户端北京12月31日电（中青报·中青网记者 贾骥业）2025年大众在享受消费品以旧换新政...
华润微：副总裁兼总法律顾问、首...
每经AI快讯，12月31日，华润微公告，公司董事会于近日收到高级管理人员李舸先生提交的书面辞职报告。...
真心办事 倾心解忧——长春南关...
“真是太感谢法院工作人员了，不仅帮我们解决了业主的合理诉求，还让拖欠的物业费得到了妥善处理。”近日，...
山东省第四届“十佳调解案例”揭...
齐鲁晚报·齐鲁壹点记者 栾海明 实习生 李敏 12月30日，由山东省司法厅、齐鲁晚报·齐鲁壹点联合开...
河套合作区深圳园区条例拟于明年...
深圳商报·读创客户端记者 张钧政 12月26日，《深圳经济特区河套深港科技创新合作区深圳园区条例》（...
山东出台《医疗纠纷预防和处理办...
齐鲁晚报·齐鲁壹点 记者 温向前 近日，山东省人民政府正式公布《山东省医疗纠纷预防和处理办法》（以下...
超23亿元索赔案：新能源产业链...
【文/观察者网 潘昱辰 编辑/高莘】日前，吉利极氪旗下电池公司威睿以电芯存在质量问题为由，将电芯供应...