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>
相关推荐
迷雾漫步者1 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-1 小时前
验证码机制
前端·后端
燃先生._.3 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖3 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235244 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240254 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar4 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人5 小时前
前端知识补充—CSS
前端·css
GISer_Jing5 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试