el-dialog实现弹窗下无遮罩效果并且可点击开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

`el-dialog`实现弹窗下无遮罩效果并且可点击

`el-dialog`实现弹窗下无遮罩效果

实际上项目中使用这个组件想实现的功能是类似一个绝对定位的弹窗的效果。之所以还是使用组件，是因为我当时的页面中使用了不少overflow：hidden;关键有些还不能关关了就会出点bug，而el-dialog有两种dom情况（可以通过append-to-body这个属性的true或false来设置），一种位于最外层的和页面同级层，这里的id='app'就是vue中常用的容器，

另一种是在页面内容内部的dom内:

element-plus中el-dialog本身有以下两个属性：
close-on-click-modal：是否可以通过点击 modal 关闭 Dialog（这里的modal指的是当前页面内容中除弹窗以外的其他内容部分）

close-on-press-escape：是否可以通过按下 ESC 关闭 Dialog（顾名思义，一般全屏后都会有的esc退出功能）具体代码如下：主要注意el-dialog内的属性即可。

<div id="dia-box">
  <el-dialog
    v-model="dialogVisible"
    width="50%"
    :append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    class="rcb-dialog"
    :modal="false"
  >
    <!--这里是弹窗弹出的具体内容-->
  </el-dialog>
</div>

让弹窗下可点击

另外要让弹窗以下可点击主要使用以下这个方法加样式：pointer-events: none;去掉鼠标事件。要找到它在的具体dom，使用js的方式会更轻松一些。element-ui中会相对简单，但我这里使用的是element-plus。

element-plus中的写法；

this.$nextTick(()=>{
  let dom = document.getElementById('dia-box')
  if(dom){
    dom.children[1].style = "pointer-events: none;"
  }
})

另外也提供下element-ui中的写法；直接找到对应类名添加样式

.el-dialog__wrapper{
    pointer-events: none;
}
.el-dialog{
    pointer-events: auto;
}