脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 element plus弹框拖拽

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弹框拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue3+vite+SQL.js如何读取db3文件数据

    vue3+vite+SQL.js如何读取db3文件数据

    这篇文章主要介绍了vue3+vite+SQL.js如何读取db3文件数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue.js实现简易折叠面板

    vue.js实现简易折叠面板

    这篇文章主要为大家详细介绍了JavaScript实现简易折叠面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 解决echart在vue中id重复问题

    解决echart在vue中id重复问题

    这篇文章主要介绍了解决echart在vue中id重复问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue+Ant Design进行大数据量下拉框卡顿与表单提交优化

    Vue+Ant Design进行大数据量下拉框卡顿与表单提交优化

    在现代前端开发中,处理大数据量渲染和表单交互是常见的挑战,本文将探讨如何优化 Ant Design Vue 下拉框在大数据量情况下的性能问题,并解决表单提交后重复提示的问题,需要的可以了解下
    2025-03-03
  • vue 中 命名视图的用法实例详解

    vue 中 命名视图的用法实例详解

    这篇文章主要介绍了vue 中 命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-08-08
  • Vuex Store 数据在页面刷新后丢失的解决方法

    Vuex Store 数据在页面刷新后丢失的解决方法

    当我们使用 Vue.js 和 Vuex 进行状态管理时,一个常见的问题是页面刷新会导致 Vuex store 中的数据丢失,本文将详细介绍解决 Vuex Store 数据在页面刷新后丢失的方法,感兴趣的朋友一起看看吧
    2024-08-08
  • vue-cli创建项目及项目结构解析

    vue-cli创建项目及项目结构解析

    上一篇我们安装了vue-cli，接下来我们就使用该脚手架进行创建项目，这篇文章主要介绍了vue-cli创建项目以及项目结构的相关资料,需要的朋友可以参考下面文章的具体内容
    2021-10-10
  • Vue登录功能实现全套详解(含封装axios)

    Vue登录功能实现全套详解(含封装axios)

    登录功能对于前端刚入门不久的同学来说较为困难,下面这篇文章主要给大家介绍了关于Vue登录功能实现(含封装axios)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue从仓库state中取不到数据的问题

    vue从仓库state中取不到数据的问题

    这篇文章主要介绍了vue从仓库state中取不到数据的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 浅谈Vue 自动化部署打包上线

    浅谈Vue 自动化部署打包上线

    这篇文章主要介绍了浅谈Vue 自动化部署打包上线，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论