当前位置: 首页 > 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"…...

go配置文件

https://github.com/spf13/viper viper golang中常用的配置文件工具为viper库&#xff0c;是一个第三方库。viper功能&#xff1a; 解析JSON、TOML、YAML、HCL等格式的配置文件。监听配置文件的变化(WatchConfig)&#xff0c;不需要重启程序就可以读到最新的值。...

C++ OpenGL学习笔记(2、绘制橙色三角形绘制、绿色随时间变化的三角形绘制)

相关文章链接 C OpenGL学习笔记&#xff08;1、Hello World空窗口程序&#xff09; 目录 绘制橙色三角形绘制1、主要修改内容有&#xff1a;1.1、在主程序的基础上增加如下3个函数1.2、另外在主程序外面新增3个全局变量1.3、编写两个shader程序文件 2、initModel()函数3、initS…...

项目搭建+删除(单/批)

一 : 删除没有单独的页面,在列表页面写 二 : 删除在列表的页面 1.删除(单/双)的按钮 ① : 在列表文档就绪函数的ajax里面,成功回调函数追加数据里写删除按钮 注意点 : 删除/修改/回显都是根据id来的,记得传id ② : 批删给批删按钮,定义批删的方法 one : 示例(单删) : //循环追…...

《小米创业思考》

《小米创业思考》是小米创始人雷军对小米创业历程的系统梳理和深度思考&#xff0c;蕴含着许多宝贵的创业经验与智慧&#xff0c;以下是主要内容&#xff1a; 创业初心与梦想 - 源于热爱与使命感&#xff1a;雷军及团队怀着对科技的热爱和让每个人享受科技乐趣的使命感创立小米…...

多种注意力机制详解及其源码

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

VMWare 的克隆操作

零、碎碎念 VMWare 的这个克隆操作很简单&#xff0c;单拎出来成贴的目的是方便后续使用。 一、操作步骤 1.1、在“源”服务器上点右键&#xff0c;选择“管理--克隆” 1.2、选择“虚拟机的当前状态”为基础制作克隆&#xff0c;如下图所示&#xff0c;然后点击“下一页” 1.3、…...

Y3编辑器教程7:界面编辑器

文章目录 一、简介1.1 导航栏1.2 画板1.3 场景界面1.4 控件1.4.1 空节点1.4.2 按钮1.4.3 图片1.4.4 模型1.4.5 文本1.4.6 输入框1.4.7 进度条1.4.8 列表 1.5 元件1.5.1 简介1.5.2 差异说明1.5.3 元件实例的覆盖、还原与禁止操作1.5.4 迷雾控件 1.6 属性1.7 事件&#xff08;动画…...

「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具

本篇将带你实现一个评分统计工具&#xff0c;用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果&#xff0c;并统计平均分。这一功能适合用于问卷调查或评分统计的场景。 关键词 UI互动应用评分统计状态管理数据处理多目标评分 一、功能说明 评分统计工具允许用…...

run postinstall error, please remove node_modules before retry!

下载 node_modules 报错&#xff1a;run postinstall error, please remove node_modules before retry! 原因&#xff1a;node 版本出现错误&#xff0c;我的项目之前是在 12 下运行的。解决方法&#xff1a; 先卸载node_modules清除缓存将node版本切换到12重新下载即可...

详细解读TISAX认证的意义

详细解读TISAX认证的意义&#xff0c;犹如揭开信息安全领域的一颗璀璨明珠&#xff0c;它不仅代表了企业在信息安全管理方面的卓越成就&#xff0c;更是通往全球汽车供应链信任桥梁的关键一环。TISAX&#xff0c;即“Trusted Information Security Assessment Exchange”&#…...

【开源项目】数字孪生轨道~经典开源项目数字孪生智慧轨道——开源工程及源码

飞渡科技数字孪生轨道可视化平台&#xff0c;基于国产数字孪生引擎&#xff0c;结合物联网IOT、大数据、激光雷达等技术&#xff0c;对交通轨道进行超远距、高精度、全天侯的监测&#xff0c;集成轨道交通运营数据&#xff0c;快速准确感知目标&#xff0c;筑牢轨交运营生命线。…...

云原生是什么

云原生是一种构建和运行应用程序的方法&#xff0c;它充分利用了云计算的优势。它不仅仅是指在云上运行应用程序&#xff0c;更重要的是指应用程序的设计、开发、部署和运维方式都充分考虑了云环境的特性&#xff0c;从而能够更好地利用云的弹性、可扩展性和灵活性。 更详细地…...

买卖股票的最佳时机 IV - 困难

************* C topic&#xff1a;188. 买卖股票的最佳时机 IV - 力扣&#xff08;LeetCode&#xff09; ************* Stock angin: Still stocks. Intuitively, it feels hard. For once: class Solution { public:int maxProfit(vector<int>& prices) {in…...

linux源码编译php提示:No package ‘oniguruma‘ found

编译遇到缺少Oniguruma开发包&#xff0c;处理办法1 安装epel仓库、安装 Oniguruma 开发包 [rootiZwz98gb9fzslgpnomg3ceZ php-8.1.29]# yum install epel-release [rootiZwz98gb9fzslgpnomg3ceZ php-8.1.29]# yum install oniguruma oniguruma-devel 方法2&#xff1a;去On…...

2024技能大赛Vue流程复现

1. 关于版本的控制 vue/cli 5.0.8vscode 最新下载版本 2. 创建vuecli项目 若没有安装vuecli则可以先安装 npm install -g vue/cli # 默认下载最新版本。vue --version vue -V # 查看版本&#xff0c;两个选一 使用vuecli来创建一个新的vue项目&#xff0c;vs code打开…...

MATLAB截取图像的一部分并保存导出,在itksnap中3D展示

**问题描述&#xff1a;**输入nifti图像&#xff0c;截取图像的一部分并输出&#xff0c;比如截取图像的101010这一块&#xff0c;并导出为nii文件 inputFile D:\aa\dcm\input.nii; % 输入文件路径subsetSize [10 10 10]; % 截取的图像块大小 subsetStart [1 1 1]; % 截取的…...

JMeter配置原件-计数器

一、面临的问题&#xff1a; 由于本人的【函数助手对话框】中counter计数器每次加2&#xff0c;且只显示偶数(如下图所示)&#xff0c;因此借助【配置原件-计数器】来实现计数功能。 如果有大佬知道解决方式&#xff0c;麻烦评论区解答一下&#xff0c;谢谢。 二、配置原件-c…...

go面试问题

1 Go的内存逃逸如何分析 go build -gcflags-m main_pointer.go 2 http状态码 300 请求的资源可包括多个位置&#xff0c;相应可返回一个资源特征与地址的列表用于用户终端&#xff08;例如&#xff1a;浏览器&#xff09;选择 301 永久移动。请求的资源已被永久的移动到新U…...

springboot 配置Kafka 关闭自启动连接

这里写自定义目录标题 springboot 配置Kafka 关闭自启动连接方法一&#xff1a;使用 ConditionalOnProperty方法二&#xff1a;手动管理Kafka监听器容器方法三&#xff1a;使用 autoStartupfalse结语 springboot 配置Kafka 关闭自启动连接 在Spring Boot应用程序中&#xff0c…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...