流畅交互体验：实现Vue中el-dialog拖动效果的完美指南

前端奇遇记

已于 2023-07-28 17:30:48 修改

阅读量7.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：拓展实用小功能文章标签： vue.js 前端 javascript

于 2023-07-05 16:36:19 首次发布

本文链接：https://blog.youkuaiyun.com/LaityMm/article/details/131556688

文章介绍了如何通过自定义指令在ElementUI的Dialog组件上实现可拖拽功能。在draggable.js文件中定义了一个指令，处理鼠标按下、移动和释放事件，动态改变Dialog的位置。在需要拖拽的Dialog组件上应用这个自定义指令，实现了简单的拖放效果。文章提供了一个适用于B端系统、ERP系统的解决方案，并提到可通过vuedraggable等第三方库实现更复杂的拖拽需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用elementUI中的Dialog组件时，总有无理的产品提需求，在右上角增加可点击全屏的功能、给我实现弹出框可任意拖拽的功能......这种情况下，组件就不能很好的使用了，那么，只能由我们前端攻城狮进行代码攻克了，接下来就实现其中的可拖拽功能

话不多说我将用使用自定义指令的方式(适用于多el-dialog实现可拖拽的需求，如B端系统、ERP系统等)

当然也有使用第三方库的方式进行实现，在这里就不做过多赘述了，推荐使用vuedraggable

好了，回归正题，接下来看实现过程

1. 创建draggable.js文件

// draggable.js

export default {
  bind(el) {
    let startPosition = { x: 0, y: 0 };
    let dialogPosition

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端奇遇记

关注关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
11
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue用sortablejs实现el-table表格行拖拽排序，在el-dialog中使用遇到的问题

coderYYY的博客

06-09

1192

使用sortable.js实现el-table行拖拽

vue2.0+elementui el-dialog对话框去掉覆盖层后解决无法操作底层的问题

qq_45927262的博客

02-11

374

element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面。element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面-优快云博客。对去掉覆盖层之后，发现无法操作底层页面。设置css 样式来解决。给对话框设置一个唯一的 ID，仅对当前对话框进行相关处理。

11 条评论您还未登录，请先登录后发表或查看评论

vue实现element-ui对话框可拖拽功能

10-18

主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

element 可移动dialog

昨天1990的专栏

09-10

2029

import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); // dialogHeaderEl...

Element-UI中el-dialog弹框在Vue中如何实现浏览器可见区域拖拽功能

最新发布

觉醒法师的专栏

06-16

883

本文介绍了在Element-UI的el-dialog弹框中实现拖拽功能的优化方案。相比之前通过position定位的实现方式存在效果不佳的问题，新方案采用Vue.directive钩子函数，通过transform动画方式完成弹框拖拽移位，并将拖拽范围限定在浏览器可见区域内，提升了用户体验和实现效果。该方案通过底层添加标签属性的方式实现这一功能。

vue自定义拖动弹框指令

xx_ll_的博客

04-01

850

1、在main.js同级目录下新建 directives.js文件 // directives.js import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive vue自定义指令 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { // ...

Element-UI实现el-dialog弹框拖拽功能

觉醒法师的专栏

06-17

8821

在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。

el-dialog 实现可以拖动的弹窗

吴小花的博客

04-18

2942

实现可拖动弹窗。

实现element-ui中dialog的拖拽

qq_40411455的博客

01-14

1102

1、utils文件夹下创建dialog.js文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__head...

element组件中对话框的拖拽和初始化

qq_39389646的博客

09-23

748

element组件中对话框的拖拽创建directives.js import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el...

el-dialog可拖拽

TianQiWanLaiQiu的博客

04-26

895

1、新建文件两位放两个文件。

vue-element-dialog-drag:支持ElementUI对话框拖动

04-28

Vue元素对话框拖动支持ElementUI对话框拖动用法 npm install vue - element - dialog - draggable -- save import DlgDraggable from "vue-element-dialog-draggable" Vue . use ( DlgDraggable , { containment : true //Constrains dragging to within the bounds of the window. Default: false. } ) ; < el xss=removed> //.... < / el-dialog > 例子

vue-dialog-drag-可拖动对话框-Vue.js开发

05-27

vue-dialog-drag简单的可拖动对话框演示功能：拖放支持（仅用于拖放，不用于拖放）拖放区域组件“ Pin模式”，以锁定vue-dialog-drag简单的可拖动对话框演示功能：拖放支持（仅用于拖动，不用于放置）放置区域组件“ Pin模式”，用于锁定拖动。安装npm install vue-dialog-drag --save用法从“ vue-dialog-drag”导入和注册组件导入DialogDrag导出默认值{...组件：{DialogDrag}} include cs 或从以下来源导入源组件：'vue-dialog-drag / src / vue-dialog-dr

elementUI vue this.$confirm 和el-dialog 弹出框移动示例demo

10-16

总结以上知识点，我们可以了解到在Vue项目中，如何利用Element UI来构建用户界面，包括如何使用`<el-dialog>`组件创建可拖拽的弹窗，以及如何通过`this.$confirm`方法调用确认框。同时，文件还展示了如何通过原生...

vue el-table实现自定义表头

10-15

此外，示例代码还展示了el-dialog组件的使用，它可以创建一个可拖拽、自定义大小的弹出层，用来展示一些额外的信息或者操作。在实际应用中，它常被用来实现模态窗口效果。在自定义表头的代码中，还需要注意对按钮...

vue 指令实现 el-dialog 模态框拖拽

@必意玲

04-26

4249

el-dialog v-draggable width = " 80% " @close = " resetFirst " :visible.sync = " dialogFormVisible " :close-on-click-modal = " false " > < div > 弹窗的内容。。。。

vue el-dialog 弹窗实现手动拖拽效果

木啊马

08-04

4121

我们在使用 elementUI 中的 el-dialog 对话框组件时，位置默认是经过设置的固定位置，会遮挡住对话框后面的文本，在使用时想看下后面的文本需要关闭对话框再操作，效果非常的不理想，要是对话框可以拖拽移动位置就很人性化；以上就是如何给 el-dialog 添加拖拽功能，添加此功能后效果很明显，使用起来更加方便。

Element UI el-dialog自由拖动功能

qq_48354174的博客

03-23

1400

element dialog自由拖动

vue中el-dialog编辑页面和新增

03-08

### 使用 Element UI 的 `el-dialog` 组件实现编辑和新增功能为了在 Vue 项目中使用 Element UI 的 `el-dialog` 组件来实现编辑和新增功能，可以遵循以下最佳实践： #### 定义数据模型定义用于存储表单字段的数据对象以及控制对话框可见性的布尔变量。 ```javascript data() { return { dialogFormVisible: false, formLabelWidth: '120px', formData: { id: '', name: '', description: '' }, rules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ], description: [ { required: true, message: '请输入描述', trigger: 'blur' } ] } }; } ``` #### 创建方法处理逻辑创建打开/关闭对话框的方法，并区分是编辑还是新建操作。对于编辑模式，需预先填充表单；而对于新建，则清空表单项。 ```javascript methods: { openDialog(isEdit, item) { this.dialogFormVisible = true; if (isEdit && item) { Object.assign(this.formData, item); } else { this.$nextTick(() => { this.$refs['form'].resetFields(); }); } }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 提交表单到服务器... alert('submit!'); this.dialogFormVisible = false; } else { console.log('error submit!!'); return false; } }); } } ``` #### 设置模板结构构建 HTML 结构并绑定相应的属性与事件处理器。注意这里加入了 `append-to-body` 属性以确保遮罩层正常工作[^1]。 ```html <template> <div>  <button @click="openDialog(true, selectedItem)">编辑</button>  <button @click="openDialog(false)">新增</button>  <el-dialog title="编辑 / 新建" :visible.sync="dialogFormVisible" append-to-body> <el-form ref="formData" :model="formData" :rules="rules"> <el-form-item label="名称" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="描述" prop="description"> <el-input type="textarea" v-model="formData.description"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取消</el-button> <el-button type="primary" @click="submitForm('formData')">确定</el-button> </span> </el-dialog> </div> </template> ``` 通过上述方式，在 Vue 应用程序里利用 Element UI 的 `el-dialog` 可方便地完成编辑和新增界面的设计与交互体验优化。同时考虑到不同场景下的需求变化，还可以进一步扩展此方案的功能特性，比如调整弹窗大小适应屏幕宽度[^3] 或者增加拖拽支持提升用户体验[^2]。