ElementUI的Dialog弹窗实现拖拽移动功能
文章目录
- 1. ElementUI简介
- 2. 弹窗基本使用
- 3. 实现拖拽移动功能
- 4. 拓展与分析
🎉欢迎来到Java学习路线专栏~ElementUI的Dialog弹窗实现拖拽移动功能
- ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹
- ✨博客主页:IT·陈寒的博客
- 🎈该系列文章专栏:Java学习路线
- 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习
- 🍹文章作者技术和水平有限,如果文中出现错误,希望大家能指正🙏
- 📜 欢迎大家关注! ❤️
在Web应用中,弹窗是常见的交互组件之一,ElementUI 是 Vue.js 非常流行的 UI 框架之一,提供了丰富的组件库,其中的 Dialog 弹窗组件功能强大。但是,在某些场景下,我们可能需要自定义一些交互行为,比如实现 Dialog 弹窗的拖拽移动功能。本文将介绍如何在 ElementUI 的 Dialog 弹窗中实现拖拽移动的功能,并通过适当的代码插入、详细的步骤展开说明,同时进行相关的拓展和分析。
1. ElementUI简介
ElementUI 是饿了么前端团队基于 Vue.js 开发的一套开源的 UI 组件库,包含了丰富的组件,适用于快速构建美观的Web界面。其中,Dialog 组件是常用的弹窗组件,提供了诸如打开、关闭、拖拽等功能。
2. 弹窗基本使用
首先,我们需要确保项目中已经引入了 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
组件实现。现在,我们需要在这个基础上添加拖拽移动的功能。
3. 实现拖拽移动功能
为了实现 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.mouseX = event.clientX;this.mouseY = event.clientY;}},handleMouseUp() {this.dragging = false;},},
};
</script>
在上述代码中,我们通过监听 mousedown
、mousemove
和 mouseup
事件,实现了拖拽移动的效果。具体步骤如下:
- 当用户点击鼠标按下时,记录下当前鼠标位置和弹窗的初始位置。
- 随后,通过监听鼠标的移动事件,计算鼠标移动的距离,并实时更新弹窗的位置。
- 当鼠标释放时,停止拖拽。
4. 拓展与分析
拖拽移动的实现是一种常见的前端交互行为,它可以提高用户体验,使得弹窗的位置更加灵活。在实际项目中,我们可能还会遇到一些需求,比如限制弹窗的拖拽范围、响应式设计时的适配等。这时候,我们可以根据具体的情况对拖拽功能进行进一步的拓展。
总体而言,通过原生的 DOM 事件和 ElementUI 的组件特性,我们能够相对轻松地实现 Dialog 弹窗的拖拽移动功能。这种能够自由操作弹窗位置的交互方式,使得用户在使用系统时更加得心应手。
在实际开发中,为了提高代码的复用性,我们还可以将拖拽功能封装成一个独立的组件,以便在多个地方复用。这样一来,无论是 Dialog 弹窗还是其他可拖拽的元素,都可以轻松地添加拖拽功能,提高了代码的可维护性。
通过这个例子,我们不仅实现了 ElementUI Dialog 弹窗的拖拽移动功能,还对拖拽的基本原理进行了一定的解析。希望读者在实际项目中能够灵活运用这一技术,提升用户体验,创造更加友好的界面。
🧸结尾 ❤️ 感谢您的支持和鼓励! 😊🙏
📜您可能感兴趣的内容:
- 【Java面试技巧】Java面试八股文 - 掌握面试必备知识(目录篇)
- 【Java学习路线】2023年完整版Java学习路线图
- 【AIGC人工智能】Chat GPT是什么,初学者怎么使用Chat GPT,需要注意些什么
- 【Java实战项目】SpringBoot+SSM实战:打造高效便捷的企业级Java外卖订购系统
- 【数据结构学习】从零起步:学习数据结构的完整路径
相关文章:
ElementUI的Dialog弹窗实现拖拽移动功能
文章目录 1. ElementUI简介2. 弹窗基本使用3. 实现拖拽移动功能4. 拓展与分析 🎉欢迎来到Java学习路线专栏~ElementUI的Dialog弹窗实现拖拽移动功能 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页:IT陈寒的博客🎈该系列文章专栏&a…...
生成式AI模型量化简明教程
在不断发展的人工智能领域,生成式AI无疑已成为创新的基石。 这些先进的模型,无论是用于创作艺术、生成文本还是增强医学成像,都以产生非常逼真和创造性的输出而闻名。 然而,生成式AI的力量是有代价的—模型大小和计算要求。 随着生…...
机器人制作开源方案 | 智能快递付件机器人
一、作品简介 作者:贺沅、聂开发、王兴文、石宇航、盛余庆 单位:黑龙江科技大学 指导老师:邵文冕、苑鹏涛 1. 项目背景 受新冠疫情的影响,大学校园内都采取封闭式管理来降低传染的风险,导致学生不能外出,…...
PostgreSQL技术大讲堂 - 第34讲:调优工具pgBagder部署
PostgreSQL从小白到专家,是从入门逐渐能力提升的一个系列教程,内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容,希望对热爱PG、学习PG的同学们有帮助,欢迎持续关注CUUG PG技术大讲堂。 第34讲&#…...
《Python日志新宠——Loguru,轻松记录,笑对Bug!》
嘿,程序媛和程序猿们!👩💻👨💻 你们是不是也曾为日志处理这个“小事”而头疼?别着急,今天我给你们介绍一个简直比拥抱泰迪熊还要温暖的Python库——Loguru!这货不仅强…...
NET8 ORM 使用AOT SqlSugar
.NET AOT8 基本上能够免强使用了, SqlSugar ORM也支持了CRUD 能在AOT下运行了 Nuget安装 SqlSugarCore 具体代码 StaticConfig.EnableAot true;//启用AOT 程序启动执行一次就好了//用SqlSugarClient每次都new,不要用单例模式 var db new SqlSugarClient(new ConnectionC…...
CCRC认证是什么?
什么是CCRC认证? 信息安全服务资质,是信息安全服务机构提供安全服务的一种资格,包括法律地位、资源状况、管理水平、技术能力等方面的要求。 信息安全服务资质(CCRC)是依据国家法律法规、国家标准、行业标准和技术规范…...
linux内核面试题(2)
整理了一些网上的linux驱动岗位相关面试题,如果错误,欢迎指正。 工作队列是运行在进程上下文,还是中断上下文?它的回调函数是否允许睡眠? 工作队列是运行在进程上下文的。工作队列的回调函数是允许睡眠的,…...
YOLOV5----修改损失函数-ShuffleAttention
主要修改yolo.py、yolov5s.yaml及添加ShuffleAttention.py 一、ShuffleAttention.py import numpy as np import torch from torch import nn from torch.nn import init from torch.nn.parameter import Parameterclass ShuffleAttention(nn.Module):def...
Kafka(四)消费者消费消息
文章目录 如何确保不重复消费消息?消费者业务逻辑重试消费者提交自定义反序列化类消费者参数配置及其说明重要的参数session.time.ms和heartbeat.interval.ms和group.instance.id增加消费者的吞吐量消费者消费的超时时间和poll()方法的关系 消费者消费逻辑启动消费者…...
Python uiautomation获取微信内容!聊天记录、聊天列表、全都可获取
Python uiautomation 是一个用于自动化 GUI 测试和操作的库,它可以模拟用户操作来执行各种任务。 通过这个库,可以使用Python脚本模拟人工点击,人工操作界面。本文使用 Python uiautomation 进行微信电脑版的操作。 以下是本次实验的版本号。…...
Java通过Lettuce访问Redis主从,哨兵,集群
操作 首先需要maven导入依赖 <dependency><groupId>io.lettuce</groupId><artifactId>lettuce-core</artifactId><version>6.3.0.RELEASE</version> </dependency> 测试连接 public class LettuceDemo {public static voi…...
嵌入式数据库Sqlite
本文主要是介绍如何再Ubuntu下使用sqlite数据库,并且嵌入式QT环境下使用C语言来构建一个sqlite数据库,使用sqlite browser进行数据库的可视化。 1、安装sqlite 在ubuntu系统中的安装需要先下载一个安装包,SQLite Download Page 安装命令&a…...
计算机网络:网络层ARP协议
在实现IP通信时使用了两个地址:IP地址(网络层地址)和MAC地址(数据链路层地址) 问题:已知一个机器(主机或路由器)的IP地址,如何找到相应的MAC地址? 为了解决…...
集成环信IM时常见问题及解决——包括消息、群组、推送
一、消息 环信是不支持空会话的,在插入一个会话,一定要给这个会话再插入一条消息; 发送透传消息也就是cmd消息时,value的em_开头的字段为环信内部消息字段,如果使用会出现收不到消息回调的情况; 如果发送…...
Selenium自动化测试框架
一.Selenium概述 1.1 什么是框架? 框架(framework)是一个框子——指其约束性,也是一个架子——指其支撑性。是一个基本概念上的 结构用于去解决或者处理复杂的问题。 框架是整个或部分系统的可重用设计,表现为一组抽象构件及…...
C#实现观察者模式
观察者模式是一种软件设计模式,当一个对象的状态发生变化时,其所有依赖者都会自动得到通知。 观察者模式也被称为“发布-订阅”模式,它定义了对象之间的一对多的依赖性,当一个对象状态改变时,所有依赖于它的对象都会得…...
什么是持续部署
管理软件开发和部署有 3 种常见的方法:持续集成、持续交付,然后是持续部署。尽管它们经常被混淆,但它们是明显不同的。 正如您将在本文后面看到的,它们相互融合,并补充彼此的风格。但这篇文章并不是关于他们三个。今天…...
【Python】Loguru模块更简洁的日志记录库
Loguru: 更优雅的日志记录解决方案! loguru 是一个Python 简易且强大的第三方日志记录库,该库旨在通过添加一系列有用的功能来解决标准记录器的注意事项,从而减少 Python 日志记录的痛苦。 使用自带自带的 logging 模块的话,则需要…...
智慧环保:科技驱动下的环境保护新篇章
智慧环保:科技驱动下的环境保护新篇章 环境保护已经成为当今社会的重要议题,而科技的飞速发展为我们开启了智慧环保的新篇章。在这篇文章中,我们将介绍智慧环保所带来的机会和创新,以及科技在环境保护中的重要作用。 智慧环保的理…...
CTF-PWN环境搭建手册
工欲善其事必先利其器,作为一名CTF的pwn手,一定要有自己的专用解题环境。本文将详细记录kali下的pwn解题环境的安装过程,B站也会配备配套视频。 目录 安装前的准备工作 虚拟机环境编辑 VM版本安装教程 1. 下载Kali的VM虚拟机文件 2. 新…...
Nginx安装配置与SSL证书安装部署
一、Nginx Nginx是一款高性能的开源Web服务器和反向代理服务器,被广泛用于构建现代化的Web应用和提供静态内容。 nginx官网 这里下载nginx-1.24.0-zip Nginx是一款高性能的开源Web服务器和反向代理服务器,被广泛用于构建现代化的Web应用和提供静态内…...
高性能面试八股文之编译流程程序调度
1. C的编译流程 C语言程序的编译过程通常包括预处理(Preprocessing)、编译(Compilation)、汇编(Assembly)、链接(Linking)四个主要阶段。下面是这些阶段的详细说明: 1.…...
opencv的MinGW-W64编译
最近使用Qt,需要用到opencv,安装详情参考下面这个网址,写的挺好: opencv的MinGW-W64编译 - 知乎 我电脑安装Qt中自带了MinGW,所以不需要像上面网址中的下载MinGw,只需要将Qt中自带的MinGW添加到环境变量即可,如&…...
在Go编程中调用外部命令的几种场景
1.摘要 在很多场合, 使用Go语言需要调用外部命令来完成一些特定的任务, 例如: 使用Go语言调用Linux命令来获取执行的结果,又或者调用第三方程序执行来完成额外的任务。在go的标准库中, 专门提供了os/exec包来对调用外部程序提供支持, 本文将对调用外部命令的几种使用方法进行总…...
python学习:break用法详解
嗨喽,大家好呀~这里是爱看美女的茜茜呐 在执行while循环或者for循环时,只要循环条件满足,程序会一直执行循环体。 但在某些场景,我们希望在循环结束前就强制结束循环。 Python中有两种强制结束循环的方法: continue语…...
【算法萌新闯力扣】:找到所有数组中消失对数字
力扣热题:找到所有数组中消失对数字 开篇 这两天刚交了蓝桥杯的报名费,刷题的积极性高涨。算上打卡题,今天刷了10道算法题了,题目都比较简单,挑选了一道还不错的题目与大家分享。 题目链接:448.找到所有数组中消失对…...
Node.js 安装配置
文章目录 安装检测Node是否可用 安装 首先我们需要从官网下载Node安装包:Node.Js中文网,下载后双击安装没有什么特殊的地方,安装路径默认是C盘,不想安装C盘的话可以选择一下其他的盘符。安装完成以后可以不用配置环境变量,Node安装已经自动给…...
前端JS 使用input完成文件上传操作,并对文件进行类型转换
使用input实现文件上传 // 定义一个用于文件上传的按钮<input type"file" name"upload1" />// accept属性用于定义允许上传的文件类型, onchange用于绑定文件上传之后的相应函数<input type"file" name"upload2"…...
探索AI交互:Python与ChatGPT的完美结合!
大家好!我是爱摸鱼的小鸿,人生苦短,我用Python!关注我,收看技术干货。 随着人工智能的迅速发展,AI交互正成为技术领域的一大亮点。在这个过程中,Python编程语言和ChatGPT模型的结合展现出强大的…...
CI/CD - jenkins
目录 一、部署 1、简介 2、部署 二、配置 三、实时触发 四、自动化构建docker镜像 五、通过ssh插件交付任务 六、添加jenkins节点 七、RBAC 八、pipeline 九、jenkins结合ansible参数化构建 1、安装ansible 2、新建gitlab项目 3、jenkins新建项目playbook 一、部…...
【【萌新的SOC学习之 VDMA 彩条显示实验之一】】
萌新的SOC学习之 VDMA 彩条显示实验之一 实验任务 : 本章的实验任务是 PS写彩条数据至 DDR3 内存中 然后通过 VDMA IP核 将彩条数据显示在 RGB LCD 液晶屏上 下面是本次实验的系统框图 VDMA 通过 HP接口 与 PS端的 DDR 存储器 进行交互 因为 VDMA 出来的是 str…...
相机通用类之海康相机,软触发硬触发(飞拍),并输出halcon格式对象
//在此之前可以先浏览我编写的通用上位机类,更方便理解 https://blog.csdn.net/m0_51559565/article/details/134403745最近完成一个关于海康采图的demo,记录并说明用法。 先上代码。using System; using System.Collections.Generic; using System.Runt…...
linux时间调整
查看当前系统时间 [rootVM-12-12-centos ~]# date Sat Nov 18 16:09:11 CST 2023 Sat:表示星期六Saturday的缩写 Nov:表示十一月November的缩写 18:表示日期18号 16:09:11:时间 CST:China Standard Time中国标准…...
C++模版初阶
泛型编程 如下的交换函数中,它们只有类型的不同,应该怎么实现一个通用的交换函数呢? void Swap(int& left, int& right) {int temp left;left right;right temp; }void Swap(double& left, double& right) {double temp…...
软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】
软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】 课本里章节里所有蓝色字体的思维导图...
Go 语言结构体验证详解:validate 标签与自定义规则
介绍 Go 语言中,结构体验证是保障数据完整性和正确性的重要手段之一。本文将深入探讨 validate 标签的使用方式,并介绍如何结合验证库 go-playground/validator 进行自定义验证规则。 安装与导入验证库 首先,请确保已安装验证库:…...
软考-高级-系统架构设计师教程(清华第2版)【第19章 大数据架构设计理论与实践 (P691~716)-思维导图】
软考-高级-系统架构设计师教程(清华第2版)【第19章 大数据架构设计理论与实践 (P691~716)-思维导图】 课本里章节里所有蓝色字体的思维导图...
深度学习YOLOv5车辆颜色识别检测 - python opencv 计算机竞赛
文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖,适合作为竞赛课题方向࿰…...
c语言-浅谈指针(3)
文章目录 1.字符指针变量常见的字符指针初始化另一种字符指针初始化例: 2.数组指针变量什么是数组指针变量数组指针变量创建数组指针变量初始化例(二维数组传参的本质) 3.函数指针变量什么是函数指针变量呢?函数指针变量创建函数指…...
从服务器端获取人脸数据,在本地检测特征,并将特征发送给服务器
目录 1.定义函数get_database_process: 2.定义函数features_construct: 3.定义函数send_features_data: 4. 定义函数database_features_construct: 5. main 函数 1.定义函数get_database_process: …...
ARDUINO UNO 12颗LED超酷流水灯效果
效果代码: #define t 30 #define t1 20 #define t2 100 #define t3 50 void setup() { // set up pins 2 to 13 as outputs for (int i 2; i < 13; i) { pinMode(i, OUTPUT); } } /Effect 1 void loop() { effect_1(); effect_1(); effect_…...
Linux下查看pytorch运行时真正调用的cuda版本
一般情况我们会安装使用多个cuda版本。而且pytorch在安装时也会自动安装一个对应的版本。 正确查看方式: 想要查看 Pytorch 实际使用的运行时的 cuda 目录,可以直接输出 cpp_extension.py 中的 CUDA_HOME 变量。 import torch import torch.utils imp…...
分享mfc140u.dll丢失的解决方法,针对原因解决mfc140u.dll丢失的问题
作为电脑小白,如果电脑中出现了mfc140u.dll丢失的问题,肯定会比较的慌乱。但是出现mfc140u.dll丢失的问题,其实也有很简单的办法,所以大家不用慌张,接下来就教大家解决办法,能够有效的解决mfc140u.dll丢失的…...
torch_cluster、torch_scatter、torch_sparse三个包的安装
涉及到下面几个包安装的时候经常会出现问题,这里我使用先下载然后再安装的办法: pip install torch_cluster pip install torch_scatter pip install torch_sparse 1、选择你对应的torch版本:https://data.pyg.org/whl/ 2、点进去然后&…...
软件安利——火绒安全
近年来,以优化、驱动、管理为目标所打造的软件屡见不鲜,大同小异的电脑管家相继走入了公众的视野。然而,在这日益急功近利的社会氛围驱动之下,真正坚持初心、优先考虑用户体验的电脑管家逐渐湮没在了浪潮之中。无论是鲁大师&#…...
Induced AI:一个专门为自动化任务而设计的AI原生浏览器RPA平台
内容来源:xiaohuggg Induced AI:一个专门为自动化任务而设计的AI原生浏览器RPA平台 刚刚获得OpenAI CEOsama的个人投资! 它能够模拟人类浏览网页的行为,自动化地浏览网页,搜集关键信息,并对这些信息进行…...
vue3中使用reactive定义的变量响应式丢失问题(大坑!!!)
前言 在Vue 3中,可以使用reactive函数将普通JavaScript对象转换为响应式对象,这样当对象的属性发生变化时,就会自动更新相应的UI。 但是请注意以下情况可能会丢失数据的响应式: 响应式丢失的情况: 1、对使用reactiv…...
Windows Server 2012 R2系统服务器远程桌面服务多用户登录配置分享
Windows Server 2012系统在没有安装远程多界面的情况下,最多只能同时运行2个远程桌面,如果是有多个技术员、合伙人同时操作或是像游戏开发需要用到多界面,但是没有安装就很不方便,今天飞飞来和你们分享Windows server 2012R2系统远…...
mysql之搭建MHA架构实现高可用
1、定义 全称是masterhigh avaliabulity。基于主库的高可用环境下可以实现主从复制及故障切换(基于主从复制才能故障切换) MHA最少要求一主两从,半同步复制模式 2、作用 解决mysql的单点故障问题。一旦主库崩溃,MHA可以在0-30…...