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实现拖拉,每次点击度居中显示,以下贴出代码具体实现,我是可以正常拖拉并且每次度显示在中间,效果还可以,需要的可以丢上去跑跑 组件部分: <el-dialog:visible.sync"dialogVisible"…...
go配置文件
https://github.com/spf13/viper viper golang中常用的配置文件工具为viper库,是一个第三方库。viper功能: 解析JSON、TOML、YAML、HCL等格式的配置文件。监听配置文件的变化(WatchConfig),不需要重启程序就可以读到最新的值。...
C++ OpenGL学习笔记(2、绘制橙色三角形绘制、绿色随时间变化的三角形绘制)
相关文章链接 C OpenGL学习笔记(1、Hello World空窗口程序) 目录 绘制橙色三角形绘制1、主要修改内容有:1.1、在主程序的基础上增加如下3个函数1.2、另外在主程序外面新增3个全局变量1.3、编写两个shader程序文件 2、initModel()函数3、initS…...
项目搭建+删除(单/批)
一 : 删除没有单独的页面,在列表页面写 二 : 删除在列表的页面 1.删除(单/双)的按钮 ① : 在列表文档就绪函数的ajax里面,成功回调函数追加数据里写删除按钮 注意点 : 删除/修改/回显都是根据id来的,记得传id ② : 批删给批删按钮,定义批删的方法 one : 示例(单删) : //循环追…...
《小米创业思考》
《小米创业思考》是小米创始人雷军对小米创业历程的系统梳理和深度思考,蕴含着许多宝贵的创业经验与智慧,以下是主要内容: 创业初心与梦想 - 源于热爱与使命感:雷军及团队怀着对科技的热爱和让每个人享受科技乐趣的使命感创立小米…...
多种注意力机制详解及其源码
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...
VMWare 的克隆操作
零、碎碎念 VMWare 的这个克隆操作很简单,单拎出来成贴的目的是方便后续使用。 一、操作步骤 1.1、在“源”服务器上点右键,选择“管理--克隆” 1.2、选择“虚拟机的当前状态”为基础制作克隆,如下图所示,然后点击“下一页” 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 事件(动画…...
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
本篇将带你实现一个评分统计工具,用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果,并统计平均分。这一功能适合用于问卷调查或评分统计的场景。 关键词 UI互动应用评分统计状态管理数据处理多目标评分 一、功能说明 评分统计工具允许用…...
run postinstall error, please remove node_modules before retry!
下载 node_modules 报错:run postinstall error, please remove node_modules before retry! 原因:node 版本出现错误,我的项目之前是在 12 下运行的。解决方法: 先卸载node_modules清除缓存将node版本切换到12重新下载即可...
详细解读TISAX认证的意义
详细解读TISAX认证的意义,犹如揭开信息安全领域的一颗璀璨明珠,它不仅代表了企业在信息安全管理方面的卓越成就,更是通往全球汽车供应链信任桥梁的关键一环。TISAX,即“Trusted Information Security Assessment Exchange”&#…...
【开源项目】数字孪生轨道~经典开源项目数字孪生智慧轨道——开源工程及源码
飞渡科技数字孪生轨道可视化平台,基于国产数字孪生引擎,结合物联网IOT、大数据、激光雷达等技术,对交通轨道进行超远距、高精度、全天侯的监测,集成轨道交通运营数据,快速准确感知目标,筑牢轨交运营生命线。…...
云原生是什么
云原生是一种构建和运行应用程序的方法,它充分利用了云计算的优势。它不仅仅是指在云上运行应用程序,更重要的是指应用程序的设计、开发、部署和运维方式都充分考虑了云环境的特性,从而能够更好地利用云的弹性、可扩展性和灵活性。 更详细地…...
买卖股票的最佳时机 IV - 困难
************* C topic:188. 买卖股票的最佳时机 IV - 力扣(LeetCode) ************* 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开发包,处理办法1 安装epel仓库、安装 Oniguruma 开发包 [rootiZwz98gb9fzslgpnomg3ceZ php-8.1.29]# yum install epel-release [rootiZwz98gb9fzslgpnomg3ceZ php-8.1.29]# yum install oniguruma oniguruma-devel 方法2:去On…...
2024技能大赛Vue流程复现
1. 关于版本的控制 vue/cli 5.0.8vscode 最新下载版本 2. 创建vuecli项目 若没有安装vuecli则可以先安装 npm install -g vue/cli # 默认下载最新版本。vue --version vue -V # 查看版本,两个选一 使用vuecli来创建一个新的vue项目,vs code打开…...
MATLAB截取图像的一部分并保存导出,在itksnap中3D展示
**问题描述:**输入nifti图像,截取图像的一部分并输出,比如截取图像的101010这一块,并导出为nii文件 inputFile D:\aa\dcm\input.nii; % 输入文件路径subsetSize [10 10 10]; % 截取的图像块大小 subsetStart [1 1 1]; % 截取的…...
JMeter配置原件-计数器
一、面临的问题: 由于本人的【函数助手对话框】中counter计数器每次加2,且只显示偶数(如下图所示),因此借助【配置原件-计数器】来实现计数功能。 如果有大佬知道解决方式,麻烦评论区解答一下,谢谢。 二、配置原件-c…...
go面试问题
1 Go的内存逃逸如何分析 go build -gcflags-m main_pointer.go 2 http状态码 300 请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择 301 永久移动。请求的资源已被永久的移动到新U…...
springboot 配置Kafka 关闭自启动连接
这里写自定义目录标题 springboot 配置Kafka 关闭自启动连接方法一:使用 ConditionalOnProperty方法二:手动管理Kafka监听器容器方法三:使用 autoStartupfalse结语 springboot 配置Kafka 关闭自启动连接 在Spring Boot应用程序中,…...
FMQL开发板实战:从Vivado到IAR的BOOT.bin生成全流程(附避坑指南)
FMQL开发板实战:从Vivado到IAR的BOOT.bin生成全流程(附避坑指南) 在嵌入式开发领域,复旦微电子FMQL系列开发板因其高性能和灵活性备受开发者青睐。然而,对于刚接触该平台的工程师来说,从零开始生成可启动的…...
告别硬编码!Activiti7流程变量与监听器实战:动态分配审批人与业务数据流转
Activiti7流程变量与监听器实战:动态审批人分配与业务数据流转 在业务流程管理(BPM)领域,硬编码审批人始终是系统灵活性的主要障碍。当组织架构调整或审批规则变化时,传统方案往往需要重新部署流程定义。本文将深入探…...
3步打造跨设备开发工作站:code-server全场景部署指南
3步打造跨设备开发工作站:code-server全场景部署指南 【免费下载链接】code-server VS Code in the browser 项目地址: https://gitcode.com/GitHub_Trending/co/code-server 作为开发者,你是否曾面临设备限制带来的开发困境?高性能电…...
别再到处找免费AI了!用Cherry Studio+OpenRouter,5分钟搞定DeepSeek-R1和Gemini Pro 2.0
高效获取顶级AI模型的实战指南:Cherry Studio与OpenRouter深度整合方案 在探索前沿AI技术时,许多开发者都面临一个共同困境:如何在预算有限的情况下,稳定使用如DeepSeek-R1和Gemini Pro 2.0这样的尖端大语言模型?市面上…...
163MusicLyrics:双平台歌词提取的终极解决方案
163MusicLyrics:双平台歌词提取的终极解决方案 【免费下载链接】163MusicLyrics Windows 云音乐歌词获取【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 你是否曾为寻找一首心爱歌曲的完整歌词而辗转多个平台…...
别再被‘万向死锁’吓到了!一个拧瓶盖的日常例子,5分钟搞懂欧拉角和四元数的区别
从拧瓶盖到游戏开发:用生活常识破解万向死锁之谜 想象一下,你正试图拧开一瓶顽固的矿泉水瓶盖。第一次尝试,你顺时针旋转瓶盖——没动静;于是你调整手腕角度再次尝试,这次瓶盖却意外滑脱了方向。这种日常挫败感&#x…...
别再重复积分了!手把手教你用IMU预积分优化LIO-SAM(附代码避坑点)
激光SLAM实战:IMU预积分在LIO-SAM中的高效实现与调优指南 当你在深夜调试LIO-SAM时,是否曾被重复积分导致的性能瓶颈折磨得抓狂?IMU预积分技术正是解决这一痛点的银弹。不同于传统惯性积分对初始状态的强依赖,预积分将相对运动量…...
雪女-斗罗大陆-造相Z-Turbo助力AI编程:自动生成代码片段与函数注释
雪女-斗罗大陆-造相Z-Turbo助力AI编程:自动生成代码片段与函数注释 作为一名写了十几年代码的老兵,我经历过从记事本写代码到现代IDE的整个进化史。这些年,各种提升效率的工具层出不穷,但“写代码”这件事的核心——将想法转化为…...
智能序列自动化执行完全指南:从技能管理痛点到战斗效能提升的5步解决方案
智能序列自动化执行完全指南:从技能管理痛点到战斗效能提升的5步解决方案 【免费下载链接】GSE-Advanced-Macro-Compiler GSE is an alternative advanced macro editor and engine for World of Warcraft. It uses Travis for UnitTests, Coveralls to report on t…...
突破百度网盘限速:Mac用户7分钟解锁SVIP级下载体验
突破百度网盘限速:Mac用户7分钟解锁SVIP级下载体验 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘非会员100KB/s的龟速下载…...
