美文网首页
实现ElementUI的Dialog弹出后鼠标可以点击底层页面

实现ElementUI的Dialog弹出后鼠标可以点击底层页面

作者: 爱学习的小仙女早睡早起 | 来源:发表于2022-04-19 18:20 被阅读0次
image.png

亲测有用!!

html结构

<template>
  <div class="summary-dlg">
    <el-dialog
      v-dialog-drag
      :modal="false" 
      width="450px"
      title="业务小结"
      center
      :visible.sync="dlgShow"
      :before-close="handleClose"
      :close-on-click-modal="false"
      @open="openDlg"
    >
image.png

重点---->css

<style lang="less" scoped>
.summary-dlg {
  .el-dialog__wrapper{
    pointer-events:none;
    /deep/ .el-dialog{
      pointer-events:auto;
    }
  }
}
</style>
image.png

注意

注意不要给dialog标签添加append-to-body, 让dialog元素插入外层的div内


image.png

相关文章

网友评论

      本文标题:实现ElementUI的Dialog弹出后鼠标可以点击底层页面

      本文链接:https://www.haomeiwen.com/subject/xexeertx.html