vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能
更新时间：2023年11月21日 10:28:12 作者：wyy爱学习
这篇文章主要介绍了vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1、template部分
<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,主要的作用是设置元素是否对鼠标事件做出反应
<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元素的事件加回来。
<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>到此这篇关于vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能的文章就介绍到这了,更多相关vue3 element plus弹框拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue中传参params和data的区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue.js相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面通过本文给大家分享vue.js语法及常用指令，希望对大家有所帮助2017-10-10
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
这篇文章主要介绍了Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面),本文通过实例代码文字说明给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要给大家介绍了关于VUE3 Vite打包后动态图片资源不显示问题的解决方法,可能是因为在部署后的服务器环境中对中文文件名的支持不完善,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
本文给大家介绍Vue中插槽(Slot)用法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-10-10
这篇文章主要介绍了ts+vue3.0声明响应式对象的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
这篇文章主要介绍了开发一个Parcel-vue脚手架工具(详细步骤)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在现代 Web 应用开发中,良好的用户体验至关重要,本文将深入剖析一个常见的交互需求：点击页面 Tab 栏时,页面平滑滚动至该 Tab 区域,并使其吸附在顶部导航栏下方的效果,需要的朋友可以参考下2026-02-02
这篇文章主要介绍了vue3+ts项目搭建的实现示例,本文目的在于记录自己项目框架搭建的过程,通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-03-03
使用vue-element-admin框架调用后端接口及跨域的问题
这篇文章主要介绍了使用vue-element-admin框架调用后端接口及跨域的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论