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>
相关推荐
VekiSon4 分钟前
综合项目实战——电子商城信息查询系统
linux·c语言·网络·http·html·tcp·sqlite3
funnycoffee1235 分钟前
F5 Big IP如何设置web和SSH登录的白名单
前端·tcp/ip·ssh
北辰alk12 分钟前
Vue 数据响应式探秘:如何让数组变化无所遁形?
vue.js
JarvanMo13 分钟前
国产 App,求你放过我的 iPhone 电量吧!
前端
先飞的笨鸟16 分钟前
2026 年 Expo + React Native 项目接入微信分享完整指南
前端·ios·app
angelQ18 分钟前
Vercel部署:前后端分离项目的整体部署流程及问题排查
前端·javascript
AI前端老薛18 分钟前
CSS实现动画的几种方式
前端·css
晨米酱20 分钟前
轻量级 Git Hooks 管理工具 Husky
前端·代码规范
Jing_Rainbow22 分钟前
【 前端三剑客-35 /Lesson58(2025-12-08)】JavaScript 原型继承与对象创建机制详解🧬
前端·javascript·面试
携欢22 分钟前
portswigger靶场之修改序列化数据类型通关秘籍
android·前端·网络·安全