ElementUI的Dialog弹窗实现拖拽移动功能

懒大王敲代码

于 2024-08-11 16:20:52 发布

阅读量1.1k

点赞数 54

分类专栏： java 前端文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_58070962/article/details/141107033

版权

java 同时被 2 个专栏收录

11 篇文章 3 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

前言

作者简介： 懒大王敲代码，计算机专业应届生

今天给大家聊聊ElementUI的Dialog弹窗实现拖拽移动功能,希望大家能觉得实用！欢迎大家点赞 👍 收藏 ⭐ 加关注哦！💖💖

个人主页：

懒大王敲代码-CSDN博客https://blog.csdn.net/weixin_58070962?type=blog

其他专栏：

技术分享专栏http://t.csdnimg.cn/LVrbC java专栏http://t.csdnimg.cn/bw2Th ubantu与C语言学习专栏http://t.csdnimg.cn/A8yIi vue3项目实战专栏http://t.csdnimg.cn/vP2no 内网穿透专栏http://t.csdnimg.cn/GJZJA 懒大王闲谈专栏http://t.csdnimg.cn/KxzqY

在Web应用中，弹窗是常见的交互组件之一，ElementUI 是 Vue.js 非常流行的 UI 框架之一，提供了丰富的组件库，其中的 Dialog 弹窗组件功能强大。但是，在某些场景下，我们可能需要自定义一些交互行为，比如实现 Dialog 弹窗的拖拽移动功能。本文将介绍如何在 ElementUI 的 Dialog 弹窗中实现拖拽移动的功能，并通过适当的代码插入、详细的步骤展开说明，同时进行相关的拓展和分析。

一、ElementUI简介

ElementUI 是饿了么前端团队基于 Vue.js 开发的一套开源的 UI 组件库，包含了丰富的组件，适用于快速构建美观的Web界面。其中，Dialog 组件是常用的弹窗组件，提供了诸如打开、关闭、拖拽等功能。

二、弹窗基本使用

首先，我们需要确保项目中已经引入了 ElementUI。然后，我们可以使用 Dialog 组件来创建一个基本的弹窗：

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible" title="我的弹窗">
      <p>这是一个基本的弹窗</p>
    </el-dialog>
  </div>
</template>

<script>
import { ElButton, ElDialog } from 'element-plus';

export default {
  components: {
    ElButton,
    ElDialog,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

上述代码中，我们通过 el-button 组件触发打开弹窗的事件，而弹窗则由 el-dialog 组件实现。现在，我们需要在这个基础上添加拖拽移动的功能。

三、实现拖拽移动功能

为了实现 Dialog 弹窗的拖拽移动功能，我们可以利用原生的 DOM 事件来监听鼠标的按下、移动和释放动作，从而计算弹窗的位置。下面是具体的实现：

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <el-dialog
      :visible.sync="dialogVisible"
      title="我的弹窗"
      :top="dialogTop"
      :left="dialogLeft"
      @visible-change="handleVisibleChange"
      ref="dialog"
    >
      <p>这是一个可以拖拽移动的弹窗</p>
    </el-dialog>
  </div>
</template>

<script>
import { ElButton, ElDialog } from 'element-plus';

export default {
  components: {
    ElButton,
    ElDialog,
  },
  data() {
    return {
      dialogVisible: false,
      dialogTop: '50px',
      dialogLeft: '50px',
      dragging: false,
      mouseX: 0,
      mouseY: 0,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleVisibleChange(visible) {
      if (visible) {
        // 弹窗显示时，监听鼠标事件
        this.$nextTick(() => {
          this.bindDragEvent();
        });
      }
    },
    bindDragEvent() {
      const dialog = this.$refs.dialog.$el.querySelector('.el-dialog');
      dialog.style.position = 'absolute';
      dialog.style.cursor = 'move';

      dialog.addEventListener('mousedown', this.handleMouseDown);
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseDown(event) {
      this.dragging = true;
      this.mouseX = event.clientX;
      this.mouseY = event.clientY;
    },
    handleMouseMove(event) {
      if (this.dragging) {
        const deltaX = event.clientX - this.mouseX;
        const deltaY = event.clientY - this.mouseY;

        this.dialogTop = `${parseInt(this.dialogTop) + deltaY}px`;
        this.dialogLeft = `${parseInt(this.dialogLeft) + deltaX}px`;

        this.mouse

X = event.clientX;
        this.mouseY = event.clientY;
      }
    },
    handleMouseUp() {
      this.dragging = false;
    },
  },
};
</script>

在上述代码中，我们通过监听 mousedown、mousemove 和 mouseup 事件，实现了拖拽移动的效果。具体步骤如下：

当用户点击鼠标按下时，记录下当前鼠标位置和弹窗的初始位置。
随后，通过监听鼠标的移动事件，计算鼠标移动的距离，并实时更新弹窗的位置。
当鼠标释放时，停止拖拽。