el-dialog 自定义样式 + 去除遮罩层底层可点击

林北彼

于 2023-01-07 11:11:48 发布

阅读量2.6k

点赞数 4

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/qq_52507367/article/details/128588767

版权

文章介绍了如何通过CSS修改el-dialog组件的样式，去除弹窗的阴影和背景色，以及关闭按钮，并阻止点击遮罩层关闭弹窗。同时，展示了如何实现弹窗下层内容可编辑的点击效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图

去除el-dialog自身弹窗样式

  /deep/ .el-dialog {
    // 取消阴影和背景色
    background: rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    opacity: 0.9;
  }

取消el-dialog自带close按钮+点击遮罩关闭弹窗 :show-close="false" :close-on-click-modal="false"

<el-dialog :modal="false" :visible.sync="showDialog" :show-close="false" :close-on-click-modal="false">
      <div class="sos-dialog-box"></div>
</el-dialog>
//:modal="false"  去除遮罩层 （图二）
//:show-close="false"  关闭close按钮 （图一）
//:close-on-click-modal="false"  关闭点击遮罩关闭弹窗 （图一）

去除遮罩层+底层内容可编辑点击 :modal="false" +css样式

 // dialog 去除遮罩层 弹窗底下可点击
  /deep/.el-dialog__wrapper {
    pointer-events: none;
  }
  /deep/.el-dialog {
    pointer-events: auto;
  }