elementui拖拽对话框_element-ui对话框可拖拽的功能如何实现？（附代码）

本篇文章给大家带来的内容是关于element-ui对话框可拖拽的功能如何实现？(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

element-ui对话框可拖拽及边界处理

应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的，但是不解决边界问题存在一个bug，拖到不可视区域后边再也拖不回来了，不信你们可以试试。

在实现的功能的情况下，封装成了js文件，然后再main.js中引入后可全局使用。

还是上代码

功能实现代码directives.js代码如下：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.style.cursor = 'move';

dialogHeaderEl.style.cssText += ';cursor:move;'

dragDom.style.cssText += ';top:0px;'</