1.dialog组件外部使用一个div包裹
<div class="dialog">
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
2.更改组件样式(我的vue 项目使用的是less)
.dialog /deep/ .el-dialog__wrapper {
background-color:rgba(0,0,0,0.8);
}
3.如果使用的stylus
.dialog >>>.el-dialog__wrapper {
background-color:rgba(0,0,0,0.8);
}
补充：
在项目中使用了scss
.dialog ::v-deep .el-dialog__wrapper {
background-color:rgba(0,0,0,0.8);
}
