vue3+element Plus实现弹框的拖拽、可点击底层页面功能

1、template部分

javascript 复制代码
<el-dialog
      :modal="false"
      v-model="dialogVisible"
      title=""
      width="30%"
      draggable
      :close-on-click-modal="false"
      class="message-dialog"
    >
</el-dialog>

必须加的属性

modal:是否去掉遮罩层

close-on-click-modal:是否可以通过点击modal关闭Dialog

draggable:开启拖拽功能

2、css部分

网上查找的资料,css需要修改pointer-events,主要的作用是设置元素是否对鼠标事件做出反应

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

因为 .el-overlay-dialog的父级div也是一个遮罩层,所以没有效果。

最终找到解决方法如下

去掉.el-overlay-dialog的父级div的pointer-events事件。此时拖拽功能不可以使用,使用要给header、body、footer元素的事件加回来。

css 复制代码
<style lang="scss">
.message-dialog {
  .el-dialog__header,
  .el-dialog__body,
  .el-dialog__footer {
    pointer-events: auto !important;
  }
}
:has(> .el-overlay-dialog .message-dialog) {
  pointer-events: none !important;
}
</style>
相关推荐
OpenTiny社区4 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠33 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞37 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js