vant的dialog触发了其他overlay

原代码:

html 复制代码
<!-- dialog -->
	<van-dialog v-model="showTipsDialog" title="温馨提示">
	        <p>dialog内容</p>
	</van-dialog>

<!-- overlay -->
    <van-overlay style="display: flex" :show="showLoadingOverlay">
      <div><van-loading color="#1989fa" /></div>
    </van-overlay>

在触发showTipsDialog=true之后,dialog的遮罩层消失了,但是触发了overlay,并检查showLoadingOverlay是为false的。

排查原因:

因为调整overlay内容样式的时候直接把样式写在了overlay的style里面造成了样式污染,把样式写在自定义类名className即可解决。

html 复制代码
<van-overlay className="loading_overlay" :show="showLoadingOverlay">
      <div><van-loading color="#1989fa" /></div>
    </van-overlay>
相关推荐
文刀竹肃8 分钟前
DVWA -XSS(DOM)-通关教程-完结
前端·安全·网络安全·xss
lifejump11 分钟前
Pikachu | XSS
前端·xss
进击的野人15 分钟前
Vue 组件与原型链:VueComponent 与 Vue 的关系解析
前端·vue.js·面试
馬致远23 分钟前
Vue todoList案例 优化之本地存储
前端·javascript·vue.js
请叫我聪明鸭24 分钟前
CSS实现单行、多行文本超长显示 / 不超长隐藏、悬浮窗超长展示/不超长隐藏、悬浮窗手动控制样式
前端·javascript·css
blackorbird24 分钟前
苹果修复了两个在定向攻击中被利用的Webkit漏洞,其中一个与谷歌ANGLE漏洞同源
前端·webkit
席之郎小果冻25 分钟前
【04】【创建型】【聊一聊,建造者模式】
java·前端·建造者模式
风无雨27 分钟前
在 React 中实现数学公式显示:使用 KaTeX 和 react-katex
前端·react.js·前端框架
zfj32131 分钟前
vscode是js开发的,为什么能支持golang java等各种语言开发
javascript·vscode·golang
GDAL1 小时前
Mapbox GL JS 核心表达式:`==` 相等判断完全教程
javascript·mapbox