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

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"
    >
复制代码

 

 

 

重点---->css

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

 

注意

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

 

posted @   遇你温柔如初  阅读(2254)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2021-06-08 vuex 存值 解决刷新后页面数据更新问题
点击右上角即可分享
微信分享提示