流畅交互体验：实现Vue中el-dialog拖动效果的完美指南-Toy模板网

这篇具有很好参考价值的文章主要介绍了流畅交互体验：实现Vue中el-dialog拖动效果的完美指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用elementUI中的Dialog组件时，总有无理的产品提需求，在右上角增加可点击全屏的功能、给我实现弹出框可任意拖拽的功能......这种情况下，组件就不能很好的使用了，那么，只能由我们前端攻城狮进行代码攻克了，接下来就实现其中的可拖拽功能

话不多说我将用使用自定义指令的方式(适用于多el-dialog实现可拖拽的需求，如B端系统、ERP系统等)

当然也有使用第三方库的方式进行实现，在这里就不做过多赘述了，推荐使用vuedraggable

好了，回归正题，接下来看实现过程

1. 创建draggable.js文件

// draggable.js

export default {
  bind(el) {
    let startPosition = { x: 0, y: 0 };
    let dialogPosition = { x: 0, y: 0 };
    let dragging = false;

    const handleMouseDown = (e) => {
      startPosition.x = e.clientX;
      startPosition.y = e.clientY;
      dialogPosition.x = parseInt(el.style.left, 10) || 0;
      dialogPosition.y = parseInt(el.style.top, 10) || 0;

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);

      dragging = true;

      e.stopPropagation();
      e.preventDefault();
    };

    const handleMouseMove = (e) => {
      if (dragging) {
        const offsetX = e.clientX - startPosition.x;
        const offsetY = e.clientY - startPosition.y;
        el.style.left = `${dialogPosition.x + offsetX}px`;
        el.style.top = `${dialogPosition.y + offsetY}px`;
      }
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);

      dragging = false;
    };

    el.addEventListener('mousedown', handleMouseDown);
  },
};

2. 在需要拖拽功能的组件内

<template>
  <div>
    <el-dialog
      title="可拖拽对话框"
      :visible="dialogVisible"
      :close-on-click-modal="false"
      :before-close="handleClose"
      v-draggable
    >
      <span>这是一个可拖拽的对话框。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from './draggable.js';

export default {
  directives: {
    draggable,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
  },
};
</script>

看效果：

方式总结：

将新建的draggable.js文件正确的引入组件中，进行自定义指令的注册，也可以将指令进行全局注册，相信可谓同学都会，在这我就不写了。

上述代码中我仅实现简单直接的拖拽方式，所以 v-draggable 指令没有传递任何参数，如果有同学想要更繁琐的拖拽实现的话可以私信、评论区讨论呦文章来源地址https://www.toymoban.com/news/detail-661114.html

到了这里，关于流畅交互体验：实现Vue中el-dialog拖动效果的完美指南的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！