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>
相关推荐
火车叼位2 分钟前
Git 精准移植代码:cherry-pick 简单说明
前端·git
江城开朗的豌豆6 分钟前
JavaScript篇:移动端点击的300ms魔咒:你以为用户手抖?其实是浏览器在搞事情!
前端·javascript·面试
华洛13 分钟前
聊聊我们公司的AI应用工程师每天都干啥?
前端·javascript·vue.js
江城开朗的豌豆13 分钟前
JavaScript篇:你以为事件循环都一样?浏览器和Node的差别让我栽了跟头!
前端·javascript·面试
技术小丁15 分钟前
使用 HTML +JavaScript 从零构建视频帧提取器
javascript·html·音视频
gyx_这个杀手不太冷静16 分钟前
Vue3 响应式系统探秘:watch 如何成为你的数据侦探
前端·vue.js·架构
晴殇i22 分钟前
🌐 CDN跨域原理深度解析:浏览器安全策略的智慧设计
前端·面试·程序员
漫谈网络34 分钟前
TypeScript 编译 ES6+ 语法到兼容的 JavaScript介绍
javascript·typescript·es6
Uyker1 小时前
空间利用率提升90%!小程序侧边导航设计与高级交互实现
前端·微信小程序·小程序
bin91531 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的日历(Calendar),日历_天气预报日历示例(CalendarView01_18)
前端·javascript·vue.js·ecmascript·deepseek