Element plus 低版本弹窗组件添加拖拽功能

        在使用element plus 弹窗组件el-dialog 的时候,由于自己组件库版本过低,所以就会缺失某些功能,比如弹窗组件的可拖拽功能。因为某些原因element plus 组件库又不能升级,所以此时就需要自己为弹窗组件添加拖拽功能。共分为一下四个步骤

  1. 在全局状态管理中添加两个属性,dialogDom 用于保存弹窗dom,visible, 用于保存弹窗组件的props.visible便于插件根据弹窗的开关状态进行事件的绑定和解除。
  2. 在自己的弹窗组件中的el-dialog 的标签中添加ref,并监听props.visible 。当弹窗打开时将弹窗的dom,及props.visible,存入全局状态管理的新增属性中。
  3. 自定义插件,编写拖拽功能

    插件中使用watch,只能执行一次,并不能监听store.visible 的改变。所以使用Object.defineProperty,监听store.visible

  4. 安装插件。app.use();
/** @Description:弹窗过拽插件* @Author: zhangyuqi* @Date: 2024-05-27 11:01:01* @LastEditors: zhangyuqi* @LastEditTime: 2024-05-27 17:41:00* @FilePath: \idata-micro\src\plugins\dialog-drag.ts*/
import { App, reactive, ref } from 'vue';
import dataReportStore from '@/store/modules/data-report';export default {install(app:App) {let dialogVisible = dataReportStore.state.visible as Boolean;const myDialogDom = ref <any>(dataReportStore.state.dialogDom);const state = reactive({active: false,top: 0,left: 0,right: 0,bottom: 0,currentX: 0,currentY: 0,initialX: 0,initialY: 0,transformX: 0,transformY: 0,});// 鼠标进入触发方法const mouseEnter = (event:MouseEvent) => {// 鼠标进入修改弹窗元素鼠标形状if (myDialogDom.value) {// eslint-disable-next-line no-param-reassignmyDialogDom.value.firstElementChild.style.cursor = 'move';}};// 鼠标按下触发方法const mouseDown = (event:MouseEvent) => {// 鼠标进入修改弹窗元素鼠标形状if (myDialogDom.value) {event.preventDefault();// 获取元素宽高const { left, right, top, bottom } = myDialogDom.value.getBoundingClientRect();state.top = top;state.left = left;state.right = right;state.bottom = bottom;if (myDialogDom.value?.style.transform) {// 此时弹窗已经被拖拽过,存在偏移量,所计算的值应在当前偏移量上进行累加const str = myDialogDom.value.style.transform;const regExp = /-?\d+(?:\.\d+)?/g;const result = str.match(regExp) as any;state.transformX = Number(result[0]);state.transformY = Number(result[1]);state.bottom -= state.transformY;state.left -= state.transformX;state.right -= state.transformX;state.top -= state.transformY;}// eslint-disable-next-line no-param-reassignstate.initialX = event.clientX;state.initialY = event.clientY;// }state.active = true;}};// 鼠标按下触发方法const mouseUp = () => {// 鼠标进入修改弹窗元素鼠标形状if (myDialogDom.value) {state.active = false;state.top = 0;state.bottom = 0;state.left = 0;state.right = 0;state.initialX = 0;state.initialY = 0;state.currentX = 0;state.currentY = 0;state.transformX = 0;state.transformY = 0;}};// 鼠标按下触发方法const mouseMove = (event:MouseEvent) => {// 鼠标进入修改弹窗元素鼠标形状if (state.active) {event.preventDefault();state.currentX = event.clientX - state.initialX + state.transformX;state.currentY = event.clientY - state.initialY + state.transformY;// 上边界if (state.currentY <= -state.top) state.currentY = -state.top;// 左边界if (state.currentX <= -state.left) state.currentX = -state.left;// 下边界if (state.currentY >= (window.innerHeight - state.bottom)) state.currentY = window.innerHeight - state.bottom;// 右边界if (state.currentX >= (window.innerWidth - state.right)) state.currentX = window.innerWidth - state.right;// eslint-disable-next-line no-param-reassignmyDialogDom.value.style.transform = `translate(${state.currentX}px, ${state.currentY}px)`;}};// 监听器函数const watcher = (newVal:Boolean) => {if (newVal) {myDialogDom.value = dataReportStore.state.dialogDom;if (myDialogDom.value) {myDialogDom.value.firstElementChild.addEventListener('mouseenter', mouseEnter);myDialogDom.value.firstElementChild.addEventListener('mousedown', mouseDown);myDialogDom.value.firstElementChild.addEventListener('mouseup', mouseUp);document.addEventListener('mouseup', mouseUp);document.addEventListener('mousemove', mouseMove);}// 当鼠标移入的时候,更改鼠标形态// 当鼠标按下时} else {const { dialogDom } = dataReportStore.state as any;if (dialogDom) {myDialogDom.value.firstElementChild.removeEventListener('mouseenter', mouseEnter);myDialogDom.value.firstElementChild.removeEventListener('mousedown', mouseDown);myDialogDom.value.firstElementChild.removeEventListener('mouseup', mouseUp);document.removeEventListener('mouseup', mouseUp);document.removeEventListener('mousemove', mouseMove);}}};Object.defineProperty(dataReportStore.state, 'visible', {get() {return dialogVisible;},set(val:Boolean) {dialogVisible = val;watcher(val);},});},
};

注释:

  1. mouseenter,mousedown,mouseup方法都绑定在弹窗的header 部分的dom元素上。因为事件触发需要使用event.preventDefault()来清楚鼠标默认事件 。如果这三个鼠标事件绑定在弹窗整体元素上,调用event.preventDefault()之后,弹窗内的输入框等元素的功能就无法正常使用了。
  2. mouseup,mousemove事件绑定在document上,因为当鼠标拖拽弹窗在窗口边缘时,只要不松手,拖拽依然在窗口内是有效果的。如果没有绑定到document上,如果将弹窗拖拽至窗口上边缘,此时鼠标移出窗口范围至浏览器边框时,松手,再移会窗口。此时弹窗仍然会根据鼠标进行移动,这样是不对的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/17322.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

斯坦福大学李飞飞教授分享:只有计算机和机器人具备空间智能,人工智能的潜力才能得到充分发挥

在最近李飞飞教授的TED演讲中&#xff0c;她深入探讨了空间智能对人工智能&#xff08;AI&#xff09;发展的深远影响。 今天&#xff0c;AI的发展也在经历类似的革命性变化。李飞飞教授回顾了计算机视觉的早期进展&#xff0c;介绍了她和团队在ImageNet上的努力&#xff0c;以…

英语学习笔记24——Give me/us/him/her/them some ...

Give me/us/him/her/them some … 给我/我们/他/她/他们一些…… 词汇 Vocabulary desk n. 课桌&#xff08;有书桌堂&#xff09;&#xff0c;写字台 复数&#xff1a;desks 搭配&#xff1a;desk mate 同桌    构成&#xff1a;desk mate 桌子上的伙伴 同桌    cl…

[Algorithm][动态规划][简单多状态DP问题][买卖股票的最佳时机 III][买卖股票的最佳时机 Ⅳ]详细讲解

目录 1.买卖股票的最佳时机 III1.题目链接2.算法原理详解3.代码实现 2.买卖股票的最佳时机 IV1.题目链接2.算法原理详解3.代码实现 1.买卖股票的最佳时机 III 1.题目链接 买卖股票的最佳时机 III 2.算法原理详解 注意&#xff1a;本题为了便于初始化&#xff0c;有较多细节服…

Ubuntu开发入门之“制作Ubuntu rootfs根文件系统镜像“

Ubuntu开发入门之“制作Ubuntu rootfs根文件系统镜像” 问题描述解决方法1.首先从官网下载最基础的ubuntu base核心文件,ubuntu core.2.接下来就是制作一个基础功能的根文件系统3.修改可用源4.接下来就是挂载根文件系统,进行模拟安装应用5.根文件系统安装常用的工具和配置用户…

Polar Si9000 远程桌面提示cannot checkout an uncounted license错误

Polar Si 9000 版本《Si9000e_2022_v22_03》安装完成之后指定到license时候提示如下&#xff1a; cannot checkout an uncounted license 修正办法将安装目录下的license用文档编辑工具&#xff08;记事本或者Notepad&#xff09;打开.lic文件&#xff0c;使用编辑器的替换功…

瑞萨RA8系列教程 | 基于e2s实现RA8串口输出配置

关注星标公众号&#xff0c;不错过精彩内容 作者 | strongerHuang 微信公众号 | strongerHuang 串口是最常见的通信方式之一&#xff0c;也是单片机调试最常见的通信接口&#xff0c;也是现在的单片机必备的通信接口&#xff0c;目前&#xff08;2024-05&#xff09;最新、最强…

【香橙派AIpro】开箱测评

1.板子开箱 哟&#xff0c;看起来还不错哦&#xff01;&#xff01;&#xff01; 收货清单&#xff1a; 主板*1 1.5m数据线*1 充电头*1 1.1.充电头 近65W的充电头&#xff0c;不错不错。 1.2.主板 1.2.1.上面 哇噢&#xff0c;还送了2.4/5G的WiFi和蓝牙天线。 emm&#xf…

卷出新高度,直呼太强!时隔三月,YOLO再度进化升级:《YOLOv10—实时端到端目标检测》重磅来袭

真的是不止一次感叹&#xff0c;学习的速度都跟不上发论文出新品的速度。。。。。 继前文YOLOv9发布以来也就不到三个月的时间&#xff0c;YOLOv10就来了&#xff01; 《太卷了&#xff0c;目标检测新成员——YOLOv9: Learning What You Want to LearnUsing Programmable Gra…

吴恩达2022机器学习专项课程C2W2:2.22 多类 softmax softmax与神经网络 softmax的代码改良 多标签分类

目录 多分类问题1.什么是多分类问题2.多分类问题案例3.二分类与多分类的区别 Softmax1. 什么是Softmax2.逻辑回归预测的计算过程3. Softmax预测的计算过程4.Softmax 回归与逻辑回归的关系5. Softmax的损失函数 softmax与神经网络1.设置Softmax层2.Softmax层的计算3.softmax激活…

卸载/删除 Maxask.com,最简单的方法

被绑架的浏览器&#xff0c;太恶心了。 Maxask伪装成了插件&#xff0c;在你搜索网页的时候利用了重定向&#xff0c;导致出现的界面时Maxask的界面&#xff0c;很恶心。 只需要排查正在使用的&#xff0c;如下图有颜色的图表。 删除一个插件&#xff0c;浏览器搜索一下看看有…

先进制造aps专题九 中国aps行业分析

国外aps的问题是不给国内客户定制算法 国外aps的算法都很强大&#xff0c;考虑几百个约束条件&#xff0c;各种复杂的工序关系&#xff0c;还有副资源约束特殊规格约束&#xff0c;排程还优化&#xff0c;光c写的算法代码就几十万行甚至上百万行 国内aps的问题是实现不了复杂的…

项目范围管理

目录 1.概述 2.主要工作 3.基础 4.项目范围管理的过程 5.规划范围管理 6.收集需求 7.定义范围 8.创建 WBS 9.确认范围 10.控制范围 1.概述 项目范围管理是项目管理中的一个重要组成部分&#xff0c;涉及到确定项目需要完成的工作范围&#xff0c;以及如何管理和控制…

String到底创建几个对象?

String在生成的过程中如何创建对象&#xff1f; String s1 new String("hello") String s2 "world" String s3 new String("x") new String("y") String s5 new String("abc") "def" String s6 new String…

mysql数据库安装指南

这里写自定义目录标题 官网下载mysql数据库安装MySQL数据库添加环境变量查看mysql的服务验证是否配置成功 注意&#xff1a;如果用MySQL8的版本安装不成功&#xff0c;可以尝试用MySQL5的版本。MySQL8的版本可能在windows上一直不能启动&#xff0c;经过查询是某个版本的漏洞。…

分布式系列之分布式锁

背景 SOA或微服务架构体系下必不可少的一个分布式组件&#xff0c;常用于解决分布式场景下数据一致性的问题。 应用场景&#xff1a; 资源竞争控制&#xff1a;在分布式系统中&#xff0c;多个节点可能同时访问共享资源&#xff0c;如数据库、文件系统、缓存等。分布式锁可以…

如何在 jQuery 中检查一个元素是否隐藏

在前端开发中&#xff0c;我们常常需要判断一个元素是否隐藏。在 jQuery 中&#xff0c;有多种方式可以实现这一点。然而&#xff0c;并不是所有的解决方案都适用于所有情况。为此&#xff0c;我写了一个通用的解决方案来应对各种复杂情形。本文将详细介绍这个方法及其使用方式…

知识存储概述

文章目录 知识存储概述知识存储方式知识存储基础工具技术发展趋势 知识存储是针对知识图谱的知识表示形式设计底层存储方式&#xff0c;完成各类知识的存储&#xff0c;以支持对大规模图数据的有效管理和计算。知识存储的对象包括基本属性知识、关联知识、事件知识、时序知识和…

操作系统 实验17 批处理操作接口7:until循环与select循环

1、建立文件Until.sh实现累加和 脚本&#xff1a; #!/bin/bash sum010 sum020 i1 until [ $i -gt 100 ] dolet "sum01i"let "ji%2"if [ $j -ne 0 ];thenlet "sum02i"filet "i1" done echo $sum01 echo $sum02命令&#xff1a;. ./Un…

深入解析 RocketMQ 和 Kafka 的消息压缩机制

深入解析 RocketMQ 和 Kafka 的消息压缩机制 消息队列系统在现代分布式系统中扮演着重要角色&#xff0c;它们不仅需要高效地传递消息&#xff0c;还需要在传输过程中尽量减少带宽和存储的占用。消息压缩是一种常见的优化手段&#xff0c;可以显著减少消息的体积。本文将详细探…

Spring Security:认证与授权

Spring Security&#xff1a;认证与授权 在这篇文章中&#xff0c;你将学到与Spring Security相关的五个关键概念和术语&#xff0c;这些是你真正需要了解的。当你学习Spring Security时&#xff0c;你会一次又一次地遇到这些核心术语和概念。因此&#xff0c;在这篇文章中&am…