项目场景:
PC端开发,vue + elementUI,
源码部分
MessageBox.confirm(`${message ? message : '是否继续?'}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
})
问题描述
显示MessageBox 弹框,某种情况下,弹框背景色(遮罩层)是全黑色的。
原因分析:
可能是除了elementUI样式源码
设置的背景颜色, 项目中某个地方也设置了弹框的背景色,2者重叠导致的。
解决方案:
- 找到弹框标签的class名字。具体步骤(以火狐浏览器为例):在页面上显示弹框,打开F12(控制台),选中弹框标签,复制选中元素的class名字(
el-message-box__wrapper
); - 在公共组件、样式(建议放在公共文件内)文件中重新定义背景色,rgba值可以根据业务需求修改。
注意
:必须附加在没有scoped的style标签中。
.el-message-box__wrapper{
background-color: rgba(0, 0, 0, 0.4);
}
- 如果需要定义背景色,又不能影响本页面其他样式,可以这样:
/* 页面其他样式 */
<style scoped>
.pagination-wrap {
display: flex;
flex-direction: row-reverse;
}
</style>
/* 定义背景色的css */
<style>
.el-message-box__wrapper{
background-color: rgba(0, 0, 0, 0.8);
}
</style>