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"

测试成功

五、vue3 element-plus dialog 修改样式

template

css

六、欢迎交流指正