当前位置: 移动技术网 > IT编程>脚本编程>vue.js > 解决Vue开发中对话框被遮罩层挡住的问题

解决Vue开发中对话框被遮罩层挡住的问题

2019年05月30日  | 移动技术网IT编程  | 我要评论

铁甲小宝国语全集,爱彩人,河南刘洪涛

在vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,无论是element-ui dialog还是bootstrap的modal,如下图所示:


造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值,比较简单易行的办法如下:对于bootstrap modal需要添加css语句

.modal-backdrop {  z-index: -1;}

而对于element ui该组件已经在属性层面提供了解决办法,只要添加:modal-append-to-body="false"就可以了。

总结

以上所述是小编给大家介绍的解决vue开发中对话框被遮罩层挡住的问题,希望对大家有所帮助

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网