el-dialog去除暗色背景或修改其底色_vue 清除背景 el- dialog background

今天遇到个问题

按需求 我们界面不需要底下这层黑色的背景
找了半天 最后发现是自己没有认真读文档
首先
最直接的是modal属性

直接在el-dialog标签上 设置modal true 表示要底层 false 表示不要
参考代码如下

<el-dialog
	title="用户习惯设置"
	:visible.sync="dialogAddMembers"
	custom-class="who-open"
	:modal="false"
	:before-close="handleClose"
	v-dialogDrag
>
1
2
3
4
5
6
7
8

还有就是 可能我们是想改他的颜色 但他默认是在body下的

这就带出另一个属性 modal-append-to-body

设置底层是否在body下
还是在el-dialog下设置 参考代码如下

<el-dialog
	title="用户习惯设置"
	:visible.sync="dialogAddMembers"
	custom-class="who-open"
	:modal-append-to-body="false"
	:modal="true"
	:before-close="handleClose"
	v-dialogDrag
>
1
2
3
4
5
6
7
8
9

这样 他就会被插入在 el-dialog的父节点下

我们就能直接用通过父节点的穿透来改变他的样式 不用去担心影响到其他组件的样式
参考代码如下

<style scoped>
    父节点的选择器 >>> .v-modal{
        background: red;
    }
</style>
1
2
3
4
5