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"

 

设置后经测试,生效 

五、欢迎交流指正

转载请说明出处内容投诉
CSS教程网 » vue+element-dialog:修改关闭icon / 遮罩层不能挡住弹窗 / 遮罩层不能遮挡元素

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买