《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

最新推荐文章于 2024-04-17 11:28:05 发布
最新推荐文章于 2024-04-17 11:28:05 发布
阅读量930 收藏 10
点赞数 15
分类专栏： 程序员 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78850344/article/details/137716973
版权

求关注，求收藏，谢谢！

之前负责了我司的几个后台管理型的项目的迭代和新需求开发，第一次以前端负责人的身份参与项目，从技术方案的选型到需求的迭代，再到工作包的分配，组件的拆分，代码的审核，最后的提测、改BUG，虽然有点累，但确实接触到了很多以前不曾接触到的东西，涨了很多见识，当然也见识到了一些叹为观止的骚操作…

今天要说的是组件开发中的一项，我司的项目技术栈主要是围绕着Vue的体系开发的，UI框架基本上不是IView就是Element，且这两者都有其自带的基础组件：弹窗组件，但是从需求的角度出发，这两者的弹窗组件其实都不能满足业务的开发，比如，我司的需求中有一项比较常用但是组件又没有的功能，拖动，（IView可以拖动，但是设置拖动属性会强制将遮罩移除，这个问题直到4.6.0版本才改为不强制，而我司的iView又比较早，升级是不可能升级了）；

​

考虑到其他模块中也有使用到了拖动这个功能，且在Vue中DOM的操作能和自定义指令非常完美契合，最终决定使用自定义指令实现该功能，并且该功能会被作为一个基础组件放入项目；

效果图

=============================================================

话不多说，直接先看最终的效果图，后台模版借用的是IVew的，这个无所谓，主要是弹窗：

在这里插入图片描述

大致效果其实就是这样，挺简单的，这部分的用法就是我们指定了只有按住title部分才可以触发拖动，且拖动的时候是整个弹窗都会被拖动；

​

下载

============================================================

其实我们已经积累了一部分常用的自定义指令作为后台模版的基础建设，比如v-loading，以及这个v-move之类的，如果有需要的话，可以看看后面怎么办，这里先暂时上传了v-move的相关开发版的代码，有需要的小伙伴可以下载看看：v-move自定义指令，如果不能下载请及时留言告知，谢谢；

​

流程图

=============================================================

既然是一个自定义的指令，并且该指令具有一定的通用性，那么我们就必须要进行一些简单的设计，毕竟在开发前我们就想的很周到的话，那么不是就可以轻松很多，并且后期有人接手维护也能有一定的参考，不是啥资料都没有，大致流程图如下：

在这里插入图片描述

代码实现

==============================================================

其实整个代码的实现并不复杂，拖动相关的功能说到底就是一个跟踪鼠标移动实时改变被拖DOM的x轴和y轴坐标的过程，坐标改变了，那么就相当于被拖的DOM拖动了

​

基础知识

阅读一下功能模块需要对vue的自定义指令有一些基础认知，具体可以直接看官网的说明：Vue自定义指令，简单的说自定义指令就是Vue允许通过自定义指令来对DOM元素进行一些相关操作；

接下来，就按照流程图的顺序，逐一开发相关代码

合法参数验证

在这个阶段，我们需要验证自定义指令的绑定对象，先直接看代码：

/**

  • 初始化阶段

  • @param {HTMLElement} el 待待绑定的元素

  • @param {Object} binding Vue bin

最低0.47元/天 解锁文章
2301_78850344
关注
  • 15
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
拖动多个div
10-19
div在页面可以随便拖动
VUE实现可随意拖动的弹窗组件
10-17
今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue自定义弹窗拖拽指令
weixin_44293690的博客
12-28 615
自定义弹窗拖拽指令 第一步: src目录下新建目录directive，然后在directive目录下的新建文件el-drag-dialog.js，在该文件里实现了拖拽逻辑。 el-drag-dialog.js文件代码如下： export default { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = e
vue directive自定义指令实现弹窗可拖动
Hermia_yuan的博客
11-16 302
vue directive自定义指令实现弹窗可拖动。
vue 指令实现 el-dialog 模态框拖拽
@必意玲
04-26 3603
el-dialog v-draggable width = " 80% " @close = " resetFirst " :visible.sync = " dialogFormVisible " :close-on-click-modal = " false " > < div > 弹窗的内容。。。。
vue 鼠标拖拽移动弹窗功能
最新发布
m0_63464623的博客
04-17 397
3，在elnment ui el-dialog 弹窗中使用。,1，在src/utils新建dialog.js文件。4，鼠标左键点击弹窗头部可拖拽此弹窗移动。2，在main.js中引入。
在不同分辨率下，通过vue实现可拖拽弹窗
weixin_44604262的博客
09-15 403
不同分辨率下用，JavaScript实现可拖拽弹窗
vue二次封装ant-design-vue中的Modal弹窗组件，实现拖拽，全屏两种功能，原有参数属性不变
m0_57071129的博客
01-17 1883
在我们的项目的有的地方需要用弹框的拖拽，以及弹窗自定义全屏显示的需求，所以再次将二次合一，同时弹框里面内容自适应屏幕高度在ant-design-vue中，已经实现了拖拽，全屏的功能，下面是ant官网的示例。
vue可拖拽移动放大缩小的弹框组件
dogface博客
03-30 3025
dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素。dragover：当元素拖动到drop元素上时触发，作用于目标元素。dragleave ：当元素离开drop元素时触发，作用于目标元素。drop：当元素放下到drop元素触发，作用于目标元素。1.父元素的宽-自适应值 ini父元素的高-自适应值。dragstart：开始拖元素触发，作用于拖拽元素。dragend：放开拖动元素时触发，作用于目标元素。drag：每次元素被拖动时会触发，作用于目标元素。
antd+vue弹窗实现拖拽功能
nice444638562的博客
07-17 1990
请注意，上述只是一个简单的示例，你还可以根据实际需求进行更多自定义和扩展。另外，如果你想添加更高级的拖拽功能，你可能需要使用其他拖拽库或自行编写代码来实现。请注意，这只是一个简单的示例，仅实现了最基本的拖拽功能。你可以根据你的实际需求自定义自己的指令，并在其中添加更多的拖拽逻辑和样式。另外，如果你使用的是 TypeScript，记得在 Vue 组件中添加指令的类型声明。上面的代码中，我们使用了 Modal 组件来创建弹窗，并在弹窗内部嵌套了。你可以根据需要自定义弹窗的样式和内容，以及在。
vue element 的 dialog 弹出窗口加上 最大化 还原 和自定义拖拽、拉伸弹窗
u010454239的博客
08-29 7119
原理是 利用vue 的自定义指令功能 自定义一个指令 官方文档 下面是指令内容 export default { bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400; let minHeight = 300; //初始非全屏 let isFullScreen = false; //当前宽高 let nowWidth = 0; let nowHight = 0
可拖动的悬浮窗+对话框悬浮窗
09-26
可拖动的悬浮窗+对话框悬浮窗，相关博文：http://www.cnblogs.com/tianzhijiexian/p/3994546.html
vue使用自定义指令实现拖拽
10-16
主要为大家详细介绍了vue使用自定义指令实现拖拽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
vue全局自定义指令-元素拖拽的实现代码
10-17
主要介绍了面板拖拽之vue自定义指令,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽
ElementUI的Dialog弹窗实现拖拽移动功能
丘鸣山的博客
11-09 1729
实现ElementUI的Dialog弹窗可以拖拽移动
ant design vue a-modal实现弹窗拖拽功能
weixin_44161385的博客
06-01 3677
vue ant-design中a-modal实现拖拽功能
帮我实现一个拖拽弹窗头部的vue 自定义指令
06-06
好的，以下是一个实现拖拽弹窗头部的 Vue 自定义指令： ```js // draggable.js const draggable = { bind: function(el, binding, vnode) { let isDragging = false; let x = 0; let y = 0; let initialX = 0; let initialY = 0; el.style.cursor = 'move'; function mouseDown(e) { initialX = e.clientX - x; initialY = e.clientY - y; if (e.target === el) { isDragging = true; } } function mouseMove(e) { if (isDragging) { x = e.clientX - initialX; y = e.clientY - initialY; el.style.transform = `translate3d(${x}px, ${y}px, 0)`; } } function mouseUp(e) { isDragging = false; } el.addEventListener('mousedown', mouseDown); el.addEventListener('mousemove', mouseMove); el.addEventListener('mouseup', mouseUp); el._cleanup = function() { el.removeEventListener('mousedown', mouseDown); el.removeEventListener('mousemove', mouseMove); el.removeEventListener('mouseup', mouseUp); }; }, unbind: function(el, binding, vnode) { el._cleanup && el._cleanup(); } }; export default draggable; ``` 这个自定义指令实现了在鼠标按下时将弹窗拖动到指定位置的功能。指令会在绑定时给指定的元素添加 mousedown、mousemove 和 mouseup 事件监听器，当鼠标按下时，记录下当前鼠标位置和弹窗位置的偏移量，并将 isDragging 状态设置为 true；当鼠标移动时，根据当前鼠标位置和偏移量计算出弹窗的新位置，并使用 CSS transform 属性将其移动到指定位置；当鼠标松开时，将 isDragging 状态设置为 false。 使用这个自定义指令非常简单，只需要在弹窗头部元素上添加 v-draggable 指令即可： ```html <template> <div class="modal"> <div class="modal-header" v-draggable> <h3 class="modal-title">{{ title }}</h3> <button class="modal-close" @click="$emit('close')">x</button> </div> <div class="modal-body"> <slot></slot> </div> </div> </template> <script> import draggable from './draggable'; export default { directives: { draggable }, props: { title: String, visible: Boolean } }; </script> <style scoped> .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: #eee; cursor: move; } .modal-title { margin: 0; } .modal-close { border: none; background-color: transparent; font-size: 20px; cursor: pointer; } </style> ``` 在这个组件中，我们将 v-draggable 指令绑定到了弹窗头部的元素上。指令会自动添加鼠标事件监听器，并在鼠标拖拽时实现弹窗的移动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值