vue项目中实现el-dialog组件可拖拽效果 vue项目中实现el-dialog组件可拖

0. 首先上图，看效果
1. 实现方法
参考资料

0. 首先上图，看效果

文章图片

【vue项目中实现el-dialog组件可拖拽效果】
1. 实现方法第一步：创建 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 ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key]; // }; bar.onmousedown = function (event) {// 按下时初始化paramsvar e = event ? event : window.event; params = {top: target.offsetTop,left: target.offsetLeft,currentX: e.clientX,currentY: e.clientY,flag: true,cWidth: document.body.clientWidth,cHeight: document.body.clientHeight,tWidth: target.offsetWidth,tHeight: target.offsetHeight}; // 给被拖动块初始化样式target.style.margin = 0; target.style.top = params.top + 'px'; target.style.left = params.left + 'px'; if (!event) {// 防止IE文字选中bar.onselectstart = function () {return false; }}document.onmousemove = function (event) {// 防止文字选中window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var e = event ? event : window.event; if (params.flag) {var nowX = e.clientX; var nowY = e.clientY; // 差异距离var disX = nowX - params.currentX; var disY = nowY - params.currentY; // 最终移动位置var zLeft = 0; var zTop = 0; zLeft = parseInt(params.left) + disX; // 限制X轴范围if (zLeft <= -parseInt(params.tWidth / 2)) {zLeft = -parseInt(params.tWidth / 2); }if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) {zLeft = params.cWidth - parseInt(params.tWidth * 0.5); }zTop = parseInt(params.top) + disY; // 限制Y轴范围if (zTop <= 0) {zTop = 0; }if (zTop >= params.cHeight - parseInt(params.tHeight * 0.5)) {zTop = params.cHeight - parseInt(params.tHeight * 0.5); }// 执行移动target.style.left = zLeft + 'px'; target.style.top = zTop + 'px'; }if (typeof callback == "function") {callback(zLeft, zTop); }}document.onmouseup = function () {params.flag = false; document.onmousemove = null; document.onmouseup = null; }; }; }

第二步：新建 directive.js 文件，创建vue指令配置文件

// 引入拖拽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<-- xxxx 弹框内容... -->取消保存

注意事项
文件引入路径需前后保持一致

参考资料 Vue 自定义拖拽指令 v-drag vue+element 实现拖拽 Drag 弹框
到此这篇关于vue项目中实现el-dialog组件可拖拽效果的文章就介绍到这了,更多相关vue el-dialog可拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！