使用vue3的自定义指令给 el-dialog 增加拖拽功能

简介: element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框(el-dialog)。

先看看拖拽效果



www.zhihu.com/zvideo/1380…


vue 的自定义指令 directive



为啥选择自定义指令的方式来实现呢?一个是可以方便的获得 dom 便于操作,另一个是方便使用和封装。


自定义指令有两种注册方式,一个是全局注册,一个是局部注册。


  • 全局注册自定义指令


app.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  mounted(el) {
    // Focus the element
    el.focus()
  }
})
复制代码


来自于官网。后面做插件的时候需要用到。


  • 局部注册自定义指令


directives: {
  focus: {
    // 指令的定义
    mounted(el) {
      el.focus()
    }
  }
}
复制代码


在开发测试的阶段可以用这种方式,便于调试。插件每次修改的时候都会重新加载,而局部注册的只需要局部更新即可。


我们可以定义一个 dialogdrag,然后在 mounted 里面实现拖拽的功能。


分析 element-plus 的 Dialog 对话框



想要实现拖拽功能,首先要了解 Dialog 对话框渲染出来的结构,然后才好针对性下手改造。 通过分析可见如下结构:


image.png


简单的说,一个 div 里面放了三个 div,通过 margin(top、left) 来实现“居中”的效果。 那么也就是说我们想要实现拖拽功能的话,可以通过改变 margin-left、margin-top 的方式来。


鼠标的三个函数



提到拖拽功能,那么鼠标的三个事件 onmousedown、onmousemove、onmouseup 就必不可少了。


  • onmousedown


鼠标按下的时候记录光标的坐标,进入拖拽状态。


  • onmouseup


鼠标抬起的时候记录光标的坐标,结束拖拽状态。


  • onmousemove


按住鼠标拖动的时候触发,计算光标的偏移量,修改对话框的 margin 实现拖拽的效果。


实现代码



本来想写一个通用一点的,但是对话框渲染出来的结构比较复杂,似乎也不够通用,所以先针对 el-dialog 实现拖拽功能。


app.directive('dialogdrag', {
    // 渲染完毕
    mounted(el, binding) {
      // binding.arg
      // binding.value
      // 可视窗口的宽度
      const clientWidth = document.documentElement.clientWidth
      // 可视窗口的高度
      const clientHeight = document.documentElement.clientHeight
      // 记录坐标
      let domset = {
        x: clientWidth / 4, // 默认width 50%
        y: clientHeight * 15 / 100  // 根据 15vh 计算
      }
      // 弹窗的容器
      const domDrag = el.firstElementChild.firstElementChild
      // 重新设置上、左距离
      domDrag.style.marginTop = domset.y + 'px'
      domDrag.style.marginLeft = domset.x + 'px'
      // 记录拖拽开始的光标坐标,0 表示没有拖拽
      let start = { x: 0, y: 0 }
      // 移动中记录偏移量
      let move = { x: 0, y: 0 }
      // 鼠标按下,开始拖拽
      domDrag.onmousedown = (e) => {
        // 判断对话框是否重新打开
        if (domDrag.style.marginTop === '15vh') {
          // 重新打开,设置 domset.y  top
          domset.y = clientHeight * 15 / 100
        }
        start.x = e.clientX
        start.y = e.clientY
        domDrag.style.cursor = 'move' // 改变光标形状
      }
      // 鼠标移动,实时跟踪
      domDrag.onmousemove = (e) => {
        if (start.x === 0) { // 不是拖拽状态
          return
        }
        move.x = e.clientX - start.x
        move.y = e.clientY - start.y
        // 初始位置 + 拖拽距离
        domDrag.style.marginLeft = ( domset.x + move.x )  + 'px'
        domDrag.style.marginTop = ( domset.y + move.y )  + 'px'
      }
      // 鼠标抬起,结束拖拽
      domDrag.onmouseup = (e) => {
        move.x = e.clientX - start.x
        move.y = e.clientY - start.y
        // 记录新坐标,作为下次拖拽的初始位置
        domset.x += move.x
        domset.y += move.y
        domDrag.style.cursor = '' // 恢复光标形状
        domDrag.style.marginLeft = domset.x + 'px'
        domDrag.style.marginTop = domset.y + 'px'
        // 结束拖拽
        start.x = 0
      }
    }
  })
复制代码


  • 重新定位对话框


默认的 top 是15vh,也就是距离顶部 15% ,所以需要 用 clientHeight * 15 / 100 转换为像素。 默认的 left 是 50%,所以需要用 clientWidth / 4 转换为像素。


这样修改有一个小问题,当窗口大小发生改变的时候,左距离不会随之改变。


  • 记录位置坐标和偏移量


首先要记录对话框的距离,然后要记录拖拽的时候产生的偏移量。


  1. domset 可以记录对话框的初始坐标。
  2. start 可以记录开始拖拽的时候光标的位置。
  3. move 记录拖拽过程中,光标移动的偏移量。


  • 按下鼠标 onmousedown


按下鼠标,表示开始拖拽,这时候需要我们记录光标的位置。 另外在测试的时候发现一个小问题,当关闭对话框的时候有一个过渡动画,然后在打开对话框进行拖拽的时候,就飞掉了。


找了一下原因后发现,在关闭的过渡动画的时候,会把 top 改成 15vh,这样就和我们拖拽后的 top 不一致。


所以在按下鼠标的时候需要做一个判断。如果恢复了初始状态,那么需要改一下 domset 的 y 坐标。x坐标不用改,因为过渡动画没有改 left 。


  • 移动鼠标 onmousemove


在移动鼠标的过程中,我们可以得到光标的位置,减去初始光标位置,就是对话框要移动的距离。


然后我们用对话框的 初始坐标 + 偏移量,就可以得到对话框的新的位置坐标。 这样就实现了对话框的拖拽。


  • 抬起鼠标 onmouseup


不能一直拖拽,所以我们需要一个结束动作。


当抬起鼠标的时候,我们可以认为是结束拖拽了,这时我们要记录对话框的新的位置坐标, 然后设置 start.x = 0 表示结束拖拽。


做成插件便于复用



最后我们把这个拖拽功能做成一个插件,这样可以便于全局注册。


建立一个js文件


// dialogDrag.js
const dialogDrag = (app, options) => {
  app.directive('dialogdrag', {
    // 指令的定义
    mounted(el, binding) {
    同上,略...
}
export default dialogDrag
复制代码


然后在 main.js 里面挂载这个插件。


// 拖拽
import dialogDrag from './control-web/js/dialogDrag.js'
createApp(App).use(dialogDrag) // 对话框的拖拽
复制代码


使用方式



本来想直接放在 el-dialog 里面,但是却没有效果,所以只好在外面套上一个 div。


<div v-dialogdrag>
    <el-dialog
      title="收货地址"
      v-model="dialogFormVisible"
      :modal="false"
    >
     略...
    </el-dialog>
  </div>
复制代码


注意,要加上 v- ,即 v-dialogdrag。


源码


gitee.com/naturefw/nf…



目录
打赏
0
0
0
0
2
分享
相关文章
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
346 5
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
156 17
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
178 6
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
374 0
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
104 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
323 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
215 77
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问