问题3 — messageBox弹框，修改默认背景色

项目场景：

PC端开发，vue + elementUI，

---

源码部分

MessageBox.confirm(`${
      message ? message : '是否继续?'}`, '提示', {
    
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
    
        
         })

问题描述

---

显示MessageBox 弹框，某种情况下，弹框背景色（遮罩层）是全黑色的。

---

原因分析：

可能是除了elementUI样式源码设置的背景颜色， 项目中某个地方也设置了弹框的背景色，2者重叠导致的。

---

解决方案：

1. 找到弹框标签的class名字。具体步骤（以火狐浏览器为例）：在页面上显示弹框，打开F12（控制台），选中弹框标签，复制选中元素的class名字（el-message-box__wrapper）；
2. 在公共组件、样式（建议放在公共文件内）文件中重新定义背景色，rgba值可以根据业务需求修改。
   注意：必须附加在没有scoped的style标签中。

.el-message-box__wrapper{
    
    background-color: rgba(0, 0, 0, 0.4);
}

3. 如果需要定义背景色，又不能影响本页面其他样式，可以这样：

/* 页面其他样式 */
<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>

---

实现效果：