当前位置: 首页 > news >正文

vue el-dialog实现可拖拉

el-dialog实现拖拉,每次点击度居中显示,以下贴出代码具体实现,我是可以正常拖拉并且每次度显示在中间,效果还可以,需要的可以丢上去跑跑

组件部分: 

<el-dialog:visible.sync="dialogVisible":close-on-click-modal="false"custom-class="draggable-dialog"ref="dialog"@open="onDialogOpen"@opened="onDialogOpened"@close="onDialogClose"width="646px"><div slot="title" class="header" @mousedown="startDrag"><span>公式设置</span></div><el-divider></el-divider><div >这里写你的dialog业务代码</div></el-dialog>

定义变量:

函数部分:

startDrag(event) {event.preventDefault();this.dragging = true;this.startX = event.clientX;this.startY = event.clientY;const dialogRef = this.$refs.dialog.$el;if (!dialogRef) {console.error('无法找到对话框引用');return;}console.log('获取打开后的位置dialogRef-->',dialogRef);console.log('获取打开后的位置dialogRef.style.left-->',dialogRef.style.left);console.log('获取打开后的位置dialogRef.style.top-->',dialogRef.style.left);// 获取当前对话框的位置const style = window.getComputedStyle(dialogRef);this.currentX = parseFloat(style.left || '0');this.currentY = parseFloat(style.top || '0');console.log('this.currentX---------->',this.currentX);console.log('this.currentY---------->',this.currentY);document.onmousemove = this.doDrag.bind(this);document.onmouseup = this.stopDrag.bind(this);},doDrag(event) {if (!this.dragging) return;const deltaX = event.clientX - this.startX;const deltaY = event.clientY - this.startY;// 更新当前位置this.currentX += deltaX;this.currentY += deltaY;// 更新起始点this.startX = event.clientX;this.startY = event.clientY;const dialogRef = this.$refs.dialog.$el;if (dialogRef) {dialogRef.style.left = `${this.currentX}px`;dialogRef.style.top = `${this.currentY}px`;event.preventDefault();}},stopDrag() {this.dragging = false;document.onmousemove = null;document.onmouseup = null;},onDialogOpen() {// 对话框即将打开时,重置位置数据this.currentX = 0;this.currentY = 0;},onDialogOpened() {},onDialogClose() {// 对话框关闭时,取消所有事件监听器document.onmousemove = null;document.onmouseup = null;const dialogRef = this.$refs.dialog.$el;dialogRef.style.left= 0;dialogRef.style.top = 0;},

CSS部分:

<style scoped>/**以下是dialog */
.draggable-dialog {position: fixed !important; /* �保对话框是固定定位 */top: 50%;left: 50%;transform: translate(-50%, -50%);transition: all .3s ease;overflow: auto; /* �保对话框内部可以滚动 *//*width: 600px;  �定宽度 *//* height: 900px; /* �定高度 */
}
.header {cursor: move;
}
</style>

相关文章:

vue el-dialog实现可拖拉

el-dialog实现拖拉&#xff0c;每次点击度居中显示&#xff0c;以下贴出代码具体实现&#xff0c;我是可以正常拖拉并且每次度显示在中间&#xff0c;效果还可以&#xff0c;需要的可以丢上去跑跑 组件部分&#xff1a; <el-dialog:visible.sync"dialogVisible"…...

iOS在项目中设置 Dev、Staging 和 Prod 三个不同的环境

在 Objective-C 项目中设置 Dev、Staging 和 Prod 三个不同的环境&#xff0c;并为每个环境使用不同的 Bundle ID&#xff0c;可以通过以下步骤实现&#xff1a; 步骤 1: 创建不同的 Build Configuration 打开项目&#xff1a; 启动 Xcode 并打开你的项目。 选择项目文件&…...

开源实时多模态AI Agent,搭载Gemini多模态API(在线体验)

今天发现一个惊艳的开源项目&#xff0c;利用多模态大模型API进行多智能体交互。支持RAG、搜索等。 TEN Agent 是一款由 TEN 提供支持的对​​话式 AI&#xff0c;集成了 Gemini 2.0 Multimodal Live API、OpenAI Realtime API、RTC 等。它提供实时的看、听和说功能&#xff0…...

【持续更新】Github实用命令

Intro 最近高强度使用github&#xff0c;遂小计于此作为备忘。 Basic github是一个代码管理软件&#xff0c;能够track文件变动并且管理版本&#xff0c;是当代coding必不可少的工具。当你安装好github在本地以后&#xff0c;你可以通过以下命令初始化当前文件夹&#xff08…...

B树的性质和插入过程

性质 平衡性&#xff1a;所有叶子节点都在同一层多路&#xff1a;m 阶 B 树 最多&#xff1a; m 个分支&#xff0c;m-1 个元素 最少&#xff1a; 根节点 2 个分支 1个元素 其他节点 ⌈ m / 2 ⌉ \lceil m/2\rceil ⌈m/2⌉ 个分支 ⌈ m / 2 ⌉ \lceil m/2\rceil ⌈m/2⌉ −…...

分布式链路追踪-02-Dapper 论文介绍

开源项目 auto-log 自动日志输出 概要 现代互联网服务通常被实现为复杂的、大规模的分布式系统。 这些应用程序是由软件模块的集合构建的&#xff0c;这些模块可能由不同的团队使用不同的编程语言开发&#xff0c;并且可以跨越多个物理设施的数千台机器。 在这样的环境中&…...

python:用 sklearn 构建线性回归模型,并评价

编写 test_sklearn_6.py 如下 # -*- coding: utf-8 -*- """ 使用 sklearn 估计器构建线性回归模型 """ import numpy as np import pandas as pd import matplotlib.pyplot as plt from matplotlib import rcParamsfrom sklearn import dataset…...

CTFHUB 信息泄露 备份文件下载-网站源码

根据提示应是猜测网站源码的备份文件&#xff0c;可以采用bp拼接文件名和后缀 开启bp抓包后设置第一个攻击点导入文件名 第二个攻击点导入后缀 开始暴力破解&#xff0c;有成功响应的 拼接到网站后缀后可以直接下载 解压缩后记事本的名字就是flag 总结&#xff1a; …...

Java String详解(三)

上一篇博客&#xff1a;Java String详解&#xff08;二&#xff09; 写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blo…...

在pycharm2024.3.1中配置anaconda3-2024-06环境

version: anaconda3-2024.06-1 pycharm-community-2024.3.1 1、安装anaconda和pycharm 最新版最详细Anaconda新手安装配置环境创建教程_anaconda配置-CSDN博客 【2024最新版】超详细Pycharm安装保姆级教程&#xff0c;Pycharm环境配置和使用指南&#xff0c;看完这一篇就够了…...

从0到1实现vue3+vite++elementuiPlus+ts的后台管理系统(一)

前言&#xff1a;从这篇文章开始实现vue3vite的后台管理系统&#xff0c;记录下自己搭建后台系统图的过程。 这篇文章完成项目的初始化和基本配置&#xff0c;这一步可以直接跟着vue3官网进行。整个系列只有前端部分&#xff0c;不涉及后端。 vue3官网&#xff1a;https://cn.…...

升级thinkphp8最新版本,升级后发现版本不变

升级thinkphp8.0.3最新版本8.1.1&#xff0c;升级后发现版本不变&#xff0c; 更新TP有两个方法 1 全部更新(所有插件都一起更新) composer update 2 只更新TP框架核心 composer update topthink/framework 造成可能有两个原因&#xff0c;一是缓存问题&#xff0c;二是更新…...

PPP协议

PPP是一种常见的广域网数据链路层协议&#xff0c;主要用于在全双工的链路上进行点到点的数据传输封装&#xff0c;支持同步传输和异步传输&#xff0c;通常用于VPN和拨号上网 PPP 概述 PPP一般运行在serial串口上&#xff0c;是一种广域网协议&#xff0c;PPP建立分为LCP&a…...

JAVA基础:数据类型

JAVA基础:数据类型 强类型语言 强类型语言(Strongly Typed Language)是指在编程语言中,每个变量都必须有一个明确的类型,并且在编译时会进行类型检查。 JAVA是强类型语言,所有变量必须先定义后使用。 弱类型语言 弱类型语言(Weakly Typed Language)是指在编程中类…...

ElasticSearch 数据聚合与运算

1、数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现数据的统计、分析和运算。实现这些统计功能的比数据库的 SQL 要方便的多&#xff0c;而且查询速度非常快&#xff0c;可以实现近实时搜索效果。 注意&#xff1a; 参加聚合的字段必须是 keywor…...

Nacos 3.0 Alpha 发布,在安全、泛用、云原生更进一步

自 2021 年发布以来&#xff0c;Nacos 2.0 在社区的支持下已走过近三年&#xff0c;期间取得了诸多成就。在高性能与易扩展性方面&#xff0c;Nacos 2.0 取得了显著进展&#xff0c;同时在易用性和安全性上也不断提升。想了解更多详细信息&#xff0c;欢迎阅读我们之前发布的回…...

GeoIP介绍

文章目录 GeoIP1. GeoIP的详细介绍2. 在Go语言中使用GeoIP GeoIP GeoIP是一种技术&#xff0c;它允许通过IP地址来查询地理位置信息&#xff0c;如国家、地区、城市等。这种技术在网络安全、内容分发、市场分析等领域有着广泛的应用。 1. GeoIP的详细介绍 原理&#xff1a; …...

详述 BigDecimal 的错误计算

摘要 详细阐述在使用 Java 的 BigDecimal 类时&#xff0c;可能产生的错误计算。 据 java中BigDecimal的介绍及使用&#xff0c;BigDecimal格式化&#xff0c;BigDecimal常见问题-CSDN博客 介绍&#xff1a;“BigDecimal 的执行顺序不能调换&#xff08;乘法交换律失效&am…...

3D Gaussian Splatting for Real-Time Radiance Field Rendering-简洁版

1. 研究背景与问题 传统的3D场景表示方法&#xff0c;如网格和点云&#xff0c;适合GPU加速的光栅化操作&#xff0c;但缺乏灵活性。而基于神经辐射场&#xff08;NeRF&#xff09;的表示方式&#xff0c;尽管质量高&#xff0c;但需要高成本的训练和渲染时间。此外&#xff0…...

(三)PyQT5+QGIS+python使用经验——解决各版本不兼容问题

一、问题描述 基础环境&#xff1a;Windows10&#xff08;64&#xff09; PyCharm2024 QGIS 3.22。 目的&#xff1a;解决之前python版本多&#xff0c;pyqt5以及QT Designer交互使用存在环境变量冲突矛盾&#xff0c;以及QGIS安装时自带python、pyqt5等问题。 尤其是在QT …...

uniapp navigateTo、redirectTo、reLaunch等页面路由跳转方法的区别

uni.switchTab 跳转到 tabBar 页面&#xff0c;并关闭其他所有非 tabBar 页面 // app.json {"tabBar": {"list": [{"pagePath": "index","text": "首页"},{"pagePath": "other","text&…...

[创业之路-198]:华为的成立发展与新中国的建立与发展路径的相似性比较

目录 一、公司比较 1、创业初期的艰难与挑战 2、坚持自主创新与研发 3、市场拓展与国际化战略 4、企业文化与社会责任 5、面临的挑战与应对策略 二、任正非管理企业的思想大量借鉴了毛泽东建国的思想 1、矛盾论与企业管理 2、群众路线与企业文化 3、战略思维与长远发…...

[Unity Shader]【图形渲染】【游戏开发】 Unity Shader与原始Shader的区别

在Unity中,Shader是用于控制如何渲染图形的程序,通常涉及到对图形管线的自定义操作。尽管所有的着色器都遵循基本的图形渲染流程,但Unity Shader和原始Shader(通常指OpenGL/DirectX等底层API的Shader)之间存在显著差异。理解这些区别能帮助开发者更好地在Unity环境下进行图…...

JAVA学习日记(二十七)反射

一、反射的概述 二、获取Class对象的三种方式 import testpackage.Student;public class Main {public static void main(String[] args) throws ClassNotFoundException {//获取.class对象的三种方式//1. Class.forName("全类名")//2. 类名.class//3. 对象.getClas…...

PyTorch中apex的安装方式

apex是NVIDIA开发的基于PyTorch的混合精度训练加速神器&#xff0c;能够增加运算速度&#xff0c;并且减少显存的占用。 Github地址&#xff1a;https://github.com/NVIDIA/apex官方教程&#xff1a;https://nvidia.github.io/apex/ 安装方式 需要注意的是apex的安装不能通过…...

JavaScript网络请求( XMLHttpRequest 对象,进度事件, 跨源资源共享)

一、 XMLHttpRequest 对象 IE5 是第一个引入 XHR 对象的浏览器。这个对象是通过 ActiveX 对象实现并包含在 MSXML 库中 的。为此&#xff0c; XHR 对象的 3 个版本在浏览器中分别被暴露为 MSXML2.XMLHttp 、 MSXML2.XMLHttp.3.0 和 MXSML2.XMLHttp.6.0 。 所有现代…...

Android Studio、JDK、AGP、Gradle、kotlin-gradle-plugin 兼容性问题

文章目录 问题&#xff1a;解决办法&#xff1a;gradle与 java的版本兼容AGP与Gradle的版本兼容kotlin 与 jvm 的版本兼容KGP、Gradle、AGP兼容关系kotlin 与 java 的编译版本配置 问题&#xff1a; 你从githb上clone了一个项目&#xff0c;本地跑的时候&#xff0c;各种报错。…...

滑动窗口(定长窗口)

题目一&#xff1a;找到字符串中所有字母异位词 438. 找到字符串中所有字母异位词 - 力扣&#xff08;LeetCode&#xff09; ​ ​ 分析 异位次&#xff0c;就是通过排序之后可以跟哪个单词一样&#xff0c;例如 hello 跟 lleho 这是定长窗口&#xff0c; 窗口维护在p的…...

Vue Web开发(九)

1. 用户管理 1.1. user页面下的diolog表单 本节课完成user页面下的diolog表单&#xff0c;表单里的元素都是动态渲染&#xff0c;以一个CommonForm组件的形式放入user页面。 运用Element ui Form表单。 1.1.1. CommonForm组件 在src/components下新建CommonForm.vue组件&am…...

go语言zero框架下的日志记录的sdk实战案例

在 Go 语言中&#xff0c;构建一个日志 SDK 是常见的开发任务&#xff0c;尤其是当你希望将日志记录集中管理时。一个好的日志 SDK 可以帮助你规范化日志记录的方式&#xff0c;并将日志存储到不同的地方&#xff08;例如&#xff1a;控制台、文件、数据库、远程日志服务等&…...

【Unity基础】Unity中拖拽3D物体的过程分析和实现方法

我们先来分析一下Unity中拖拽物体的过程&#xff1a; 第一步&#xff1a;先检测拖拽的输入方式&#xff0c;可以鼠标&#xff0c;触摸&#xff0c;可以用InputManager输入&#xff0c;也可以 使用InputSystem输入 第二步&#xff1a;获取触碰点的位置&#xff0c;并计算offse…...

深入了解Spring

目录 Spring基础 什么是Spring框架&#xff1f; Spring 包含的模块有哪些&#xff1f; Core Container AOP Data Access/Integration Spring Web Messaging Spring Test Spring,Spring MVC,Spring Boot 之间什么关系? Spring基础 什么是Spring框架&#xff1f; Sp…...

vue3修改elementui-plus的默认样式的几种方法

#创作灵感 今天写vue的前端项目&#xff0c;因为需要去修改elementui-plus中drawer的默认样式&#xff0c;所以刚好将修改步骤记录下来。 一共提供了三种方法&#xff0c;但亲测第二种最好用。 使用第二种是可以无视自己的代码中是否定义了该盒子&#xff0c;因为有时候盒子的…...

免费开源!推荐一款网页版数据库管理工具!

免费开源&#xff01;推荐一款网页版数据库管理工具&#xff01; DBGate 是一个开源的数据库管理工具&#xff0c;DBGate 的最大特点是可以 Web 访问&#xff01;&#xff0c;轻松实现一台机器部署&#xff0c;所有人使用&#xff01; 无论是 MySQL、PostgreSQL、SQLite 还是…...

Ubuntu22.04切换gcc版本教程

在编译安装程序的时候,由于gcc版本过高,导致编译无法通过,需要降低gcc版本。 一、安装gcc版本 根据自己的需求安装gcc版本。 sudo apt update sudo apt install gcc-10 g++-10二、切换gcc版本 sudo update-alternatives --install /usr/bin/gcc gcc...

OpenCV相机标定与3D重建(24)计算两个二维点集之间的最佳仿射变换矩阵(2x3)函数estimateAffine2D()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算两个二维点集之间的最优仿射变换&#xff0c;它计算 [ x y ] [ a 11 a 12 a 21 a 22 ] [ X Y ] [ b 1 b 2 ] \begin{bmatrix} x\\ y\\ \en…...

并发修改导致MVCC脏写问题

并发修改导致MVCC脏写问题 一、概要 1.1 业务场景 数据库表结构设计&#xff1a; 一个主档数据&#xff0c;通过一个字段&#xff0c;逗号分隔的方式去关联其他明细信息的id。 如主档数据A&#xff0c;有3条明细数据与A关联&#xff0c;其id分别是1,2,3&#xff0c;那么其存…...

webSokect安卓和web适配的Bug 适用实时语音场景

❌BUG&#xff1a; Failed to construct WebSocket: The URLs scheme must be either ws or wss. https is not allowed.WebSocket 协议在创建连接时&#xff0c;规定其 URL 的协议头&#xff08;scheme&#xff09;必须是 ws&#xff08;用于非加密的普通 WebSocket 连接&…...

Linux系列之如何更换Centos yum源?

环境 Centos7Xshell7 问题描述 最近安装了一个虚拟机&#xff0c;准备用来学习&#xff0c;不过使用yum命令安装一些软件&#xff0c;不过使用这个命令时候&#xff0c;提示 Cannot find a valid baseurl for repo: base/7/x86_64&#xff0c;Could not retrieve mirrorlis…...

微知-C语言如何指定弱符号?(#define WEAK __attribute__((weak)); WEAK int foo(void))

背景 在C语言中&#xff0c;弱符号是一种特殊的符号&#xff0c;它可以被重定义&#xff0c;但在链接时&#xff0c;只会使用被重定义的符号。 在某些情况下&#xff0c;我们需要在多个文件中定义相同的函数&#xff0c;但只使用其中一个函数。本文将介绍如何在C语言中实现弱符…...

三极管功能

1 三极管的结构 2 三极管开关电路设计注意事项 1 三极管进入饱和状态 电机&#xff1a;500毫安 2 判断三级什么状态&#xff1a;电压法 3 判断三级什么状态&#xff1a;电流法 4 求IB的电阻 5 当三极管用作开关时&#xff0c;通常N型三极管控制负载的gnd端&#xff0c;P型…...

Python的3D可视化库【vedo】2-5 (plotter模块) 坐标转换、场景导出、添加控件

文章目录 4 Plotter类的方法4.7 屏幕和场景中的坐标点转换4.7.1 屏幕坐标转为世界坐标4.7.2 世界坐标转为屏幕坐标4.7.3 屏幕坐标取颜色 4.8 导出4.8.1 导出2D图片4.8.2 导出3D文件 4.9 添加控件4.9.1 添加内嵌子窗口4.9.2 添加选择区4.9.3 添加比例尺4.9.4 为对象添加弹出提示…...

定时/延时任务-万字解析Spring定时任务原理

文章目录 1. 概要2. EnableScheduling 注解3. Scheduled 注解4. postProcessAfterInitialization 解析4.1 createRunnable 5. 任务 Task 和子类6. ScheduledTaskRegistrar6.1 添加任务的逻辑6.2 调度器初始化6.3 调用时机 7. taskScheduler 类型7.1 ConcurrentTaskScheduler7.2…...

Android上传到Minio本地存储

Minio简介 MinIO是一个对象存储解决方案&#xff0c;它提供了与Amazon Web Services S3兼容的API&#xff0c;并支持所有核心S3功能。 MinIO有能力在任何地方部署 - 公有云或私有云&#xff0c;裸金属基础设施&#xff0c;编排环境&#xff0c;以及边缘基础设施。author: https…...

海量数据-Vastbase G100数据库安装

海量数据-Vastbase G100数据库安装 文章目录 海量数据-Vastbase G100数据库安装前期准备防火墙配置方案一&#xff1a;关闭防火墙方案二&#xff1a;开放数据库端口 SELINUX配置时间同步IPC参数配置 单机安装设置主机名创建数据库安装用户和目录(可选)修改资源限制 字符安装&am…...

Python | 对于DataFrame中所有行数据比较的几种方法

在数据分析中&#xff0c;比较DataFrame数据框中的行是一项基本操作&#xff0c;可应用于多种场景&#xff0c;包括&#xff1a; 查找重复项&#xff1a;标识所有相似或包含相同数据的行。相似性检查&#xff1a;确定某些选定因子的不相似行的相似程度。成对分析&#xff1a;非…...

React:闭包陷阱产生和解决

在 React 中&#xff0c;闭包陷阱是一个常见的问题&#xff0c;尤其是在处理异步操作、事件处理器、或是定时器时。理解闭包的工作原理以及它在 React 中如何与状态和渲染交互&#xff0c;可以帮助你避免陷入一些常见的错误。 一、闭包陷阱的产生 1、什么是闭包陷阱&#xff1…...

图的遍历|深度优先搜索|广度优先搜索(C)

图的基本操作 图的基本操作是独立于图的存储结构的。而对于不同的存储方式&#xff0c;操作算法的具体实现会有着不同的性能。在设计具体算法的实现时&#xff0c;应考虑采用何种存储方式的算法效率会更高。 图的基本操作主要包括&#xff08;仅抽象地考虑&#xff0c;所以忽略…...

Pytest-Bdd vs Behave:选择最适合的 Python BDD 框架

Pytest-Bdd vs Behave&#xff1a;选择最适合的 Python BDD 框架 Pytest BDD vs Behave&#xff1a;选择最适合的 Python BDD 框架BDD 介绍Python BDD 框架列表Python BehavePytest BDDPytest BDD vs Behave&#xff1a;关键区别Pytest BDD vs Behave&#xff1a;最佳应用场景结…...

python文字转语音

一、安装对应的包 pip install pyttsx3 二、代码实现 import pyttsx3# 初始化tts引擎 engine pyttsx3.init()# 设置要转换的文本 text "你好"# 设置语速&#xff0c;范围从-1到1&#xff0c;1是正常速度&#xff0c;-1是最慢速度 rate engine.getProperty(rate…...