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

今天小编给大家分享一下vue项目中怎么实现el-dialog组件可拖拽效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

0. 首先上图，看效果

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) {      // 按下时初始化params      var 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项目中怎么实现el-dialog组件可拖拽效果"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。