uni.showToast 层级问题
1. 问题描述
弹出层使用的是 uView 2.x 的 u-popup 组件,提示框使用的 uniapp 的 uni.showToast()
弹出层中有表单元素,当表单中的输入框未全部填写时,点击保存给个消息提示框告诉用户必须填写完整
下图是想要实现的效果,但实际效果却是看不到消息提示,通过控制台查看元素发现是因为弹出层的优先级比消息提示框高
2. 分析问题
通过查看 uView 文档可知: 可以通过修改 u-popup 组件的 zIndex 属性修改 弹出层的 z-index 值
通过控制台查看元素可发现 uni.showToast() 的 z-index 为 999
到此为止,得出结论: 只要有个居中模块的定位 z-index 超过 999 就不会显示 uni.showToast()。解决方案就是降低居中模块的 z-index 值,使其小于 999
3. 解决问题
修改弹出层的 z-index 值
<u-popup zIndex="998"></u-popup>
修改弹出层遮罩的 z-index 值
// 处理 u-popup 组件层级过高,将 uni.showToast 覆盖问题/deep/ .u-transition.u-fade-enter-to.u-fade-enter-active { z-index: 997 !important;}
本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!
从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!
本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。
本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。