vue/Element UI 实现Element UI el-dialog 自由拖动

前言：

最近有个项目，客户要求弹窗可拖动，但是由于elemen ui本身的弹窗并没有拖动的属性，无法满足客户的需求。

于是我百度找到了几篇文章，终于可以实现客户的需求！

请往下看↓↓

一、新建一个目录：utils

二、创建drag .js文件

/** * 拖拽移动 * @param{elementObjct} bar 鼠标点击控制拖拽的元素 * @param {elementObjct}target 移动的元素 * @param {function}callback 移动后的回调 */export function startDrag(bar, target, callback) {var params = {top: 0,left: 0,currentX: 0,currentY: 0,flag: false,cWidth: 0,cHeight: 0,tWidth: 0,tHeight: 0}; // 给拖动块添加样式bar.style.cursor = 'move'; // 获取相关CSS属性// o是移动对象// var getCss = function (o, key) {// return o.currentStyle " />

三、创建directive.js 文件

// 引入拖拽jsimport { startDrag } from './drag.js' /** * 为el-dialog弹框增加拖拽功能 * @param {*} el 指定dom * @param {*} binding 绑定对象 * desc 只要用到了el-dialog的组件，都可以通过增加v-draggable属性变为可拖拽的弹框 */const draggable = (el, binding) => {// 绑定拖拽事件 [绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);}; const directives = {draggable,};// 这种写法可以批量注册指令export default {install(Vue) {Object.keys(directives).forEach((key) => {Vue.directive(key, directives[key]);});},};

四、main.js文件中全局引入vue指令

全局注册

import directive from './utils/directive'Vue.use(directive)

五、使用v-draagble

在页面上使用v-draagble

好了，经过以上的几步，已经可以实现拖动功能了！

如果有不同看法，欢迎留言交流，谢谢！！

下面是一个博主的文章，大家不懂也可以参考一下

参考链接https://www.jb51.net/article/234469.htm