Element中Dialog的拖拽功能

爱吃樱桃的美眉

于 2024-04-03 11:21:57 发布

阅读量220

点赞数 3

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/pjm2222/article/details/137329779

版权

本文介绍了如何在Vue的ElementUI组件库中为Dialog添加拖拽功能，通过创建全局Vuedirective来实现，并在dialog组件上使用`v-dialogDrag`属性进行应用。

摘要由CSDN通过智能技术生成

vue的element组件库中的dialog没有拖拽功能，搜集资料，整理一下这个功能。全局封装，引入。

一、在项目components文件夹下新建一个js文件；

import Vue from 'vue';



const dialogDrag = {

  bind(el, binding, vnode) {

    const dialogHeaderEl = el.querySelector('.el-dialog__header');

   

    if (dialogHeaderEl) {

      let isDragging = false;

      let startOffsetX = 0;

      let startOffsetY = 0;



      dialogHeaderEl.style.cursor = 'move';

     

      dialogHeaderEl.addEventListener('mousedown', function(event) {

        isDragging = true;

        startOffsetX = event.clientX - el.offsetLeft;

        startOffsetY = event.clientY - el.offsetTop;

        document.addEventListener('mousemove', mouseMove);

        document.addEventListener('mouseup', mouseUp);

      });



      function mouseMove(event) {

        if (isDragging) {

          el.style.left = `${event.clientX - startOffsetX}px`;

          el.style.top = `${event.clientY - startOffsetY}px`;

        }

      }



      function mouseUp() {

        isDragging = false;

        document.removeEventListener('mousemove', mouseMove);

        document.removeEventListener('mouseup', mouseUp);

      }

    }

  },

};



Vue.directive('dialog-drag', dialogDrag);

二、在你的dialog组件上添加v-v-dialogDrag属性，如下：

<el-dialog
      :title="title"
      :visible.sync="open"
      width="850px"
      append-to-body
      class="margintop"
      v-dialogDrag
    >
</el-dialog>

这样就完成dialog拖拽功能了。如果想要修改拖拽的距离，也可自行修改。