vue+element-dialog：修改关闭icon / 遮罩层不能挡住弹窗 / 遮罩层不能遮挡元素

一、是否显示操作按钮

二、修改dialog默认关闭icon

.el-dialog__headerbtn {top: 15px !important;width: 18px;height: 18px;background: url('~@assets/img/formworkManagement/close-button.png') left no-repeat;background-size: cover;
}
.el-dialog__headerbtn i {content: '修改下面的font-size可以改变图片的大小';font-size: 18px;visibility: hidden;
}

三、解决dialog样式不生效问题

:modal-append-to-body="false"

:append-to-body="true"

3.1、以上两个都不加 

3.2、使用modal-append-to-body

:modal-append-to-body="false" 

3.3、append-to-body

:append-to-body="true" 

四、不希望用户通过按下 Esc 键来关闭 el-dialog 对话框

:close-on-press-escape="false"

 

设置后经测试，生效 

五、欢迎交流指正