前端使用Vue和Element实现可拖动弹框效果,且不影响底层元素操作(可拖拽的视频实时播放弹框,底层元素可以正常操作)
简述:在前端开发中,弹框和实时视频播放是常见的需求。这里来简单记录一下,如何使用Vue.js和Element UI实现一个可拖动的弹框,并在其中播放实时视频。同时,确保在拖拽弹框时,底层元素仍然可以操作。
一、项目初始化,以Vue项目为例
首先,确保你的项目已经安装了Element UI。如果没有安装,可以使用以下命令进行安装并注册:
npm install element-ui
// 或者
cnpm install element-ui
二、创建Vue组件
这里我们创建一个包含实时视频播放功能的弹框组件。这个组件将使用Element UI的el-dialog
组件,并添加拖动功能,同时添加CSS代码。确保在拖拽时底层元素可以操作。
1. 弹框组件
<template><!-- 弹出框 --><el-dialogtitle="实时视频播放":visible.sync="dialogVisible"width="30%":before-close="handleClose":modal="false":close-on-click-modal="false"class="cesium_dialog"><flvVue :Url="rtsp1" v-if="dialogVisible"></flvVue><span slot="footer" class="dialog-footer"> </span></el-dialog>
</template><script>export default {data() {return {dialogVisible: false, // 弹框显示状态rtsp1: 'rtsp://your-stream-url' // 实时视频流地址};},methods: {// 打开弹框事件DialogOpen(RtspUrl) {this.dialogVisible = true; // 显示弹框},// 关闭弹框事件handleClose() {this.dialogVisible = false; // 关闭弹框}},};};
</script><style>
/* 在你的 CSS 文件或 <style> 标签中添加 */
::v-deep .el-dialog__wrapper {pointer-events: none !important; /* 禁用遮罩层的点击事件 */
}
::v-deep .el-dialog__wrapper .el-dialog {pointer-events: auto !important; /* 允许对话框内的元素交互 */margin-top: 20vh !important; /* 设置弹框距顶部的距离 */
}
</style>
2. 拖拽功能的实现
创建一个draggable.js
文件,用于实现弹框的拖拽功能:
// src/mixins/draggable.js
export default {mounted() {// 获取对话框的头部元素const dialogHeaderEl = this.$el.querySelector('.el-dialog__header');// 获取整个对话框元素const dragDom = this.$el.querySelector('.el-dialog');// 设置头部的光标为移动样式,表示可以拖动dialogHeaderEl.style.cursor = 'move';// 函数用于获取元素的计算样式const getStyle = (function () {if (window.document.currentStyle) {// 对于旧版 IE,使用 currentStylereturn (dom, attr) => dom.currentStyle[attr];} else {// 对于现代浏览器,使用 getComputedStylereturn (dom, attr) => getComputedStyle(dom, false)[attr];}})();// 鼠标按下事件处理程序dialogHeaderEl.onmousedown = (e) => {// 计算鼠标点击点相对于对话框头部的偏移量const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;// 获取对话框的宽度和高度const dragDomWidth = dragDom.offsetWidth;const dragDomHeight = dragDom.offsetHeight;// 获取浏览器窗口的宽度和高度const screenWidth = document.body.clientWidth;const screenHeight = document.body.clientHeight;// 计算对话框拖动的边界const minDragDomLeft = dragDom.offsetLeft; // 左边界// 右边界const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; // 上边界// 下边界const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight; // 获取对话框当前位置的样式(左和上),处理 px 或百分比单位let styL = getStyle(dragDom, 'left');let styT = getStyle(dragDom, 'top');// 处理百分比单位,将其转换为绝对像素值if (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100);styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100);} else {// 处理 px 单位styL = +styL.replace(/px/g, '');styT = +styT.replace(/px/g, '');}// 鼠标移动事件处理程序document.onmousemove = function (e) {// 计算新的位置let left = e.clientX - disX;let top = e.clientY - disY;// 边界处理:防止对话框拖动超出边界if (-left > minDragDomLeft) {left = -minDragDomLeft;} else if (left > maxDragDomLeft) {left = maxDragDomLeft;}if (-top > minDragDomTop) {top = -minDragDomTop;} else if (top > maxDragDomTop) {top = maxDragDomTop;}// 更新对话框的位置dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;};// 鼠标释放事件处理程序document.onmouseup = function () {// 解除鼠标移动和释放事件的绑定document.onmousemove = null;document.onmouseup = null;};};}
};};
3. 整合拖拽功能
将draggable.js
文件混入到你的Vue组件中,使得弹框可以实现拖动功能,同时确保拖拽时底层元素仍然可以操作。
import draggable from "@/utils/hs/draggable.js"; // 引入拖拽功能export default {// 混入拖拽功能mixins: [draggable],data() {return {......};},methods: {......},};};
三. 完整代码
1. Vue
<template><!-- 弹出框 --><el-dialogtitle="实时视频播放":visible.sync="dialogVisible"width="30%":before-close="handleClose":modal="false":close-on-click-modal="false"class="cesium_dialog"><flvVue :Url="rtsp1" v-if="dialogVisible"></flvVue><span slot="footer" class="dialog-footer"> </span></el-dialog>
</template><script>
import draggable from "@/utils/hs/draggable.js"; // 引入拖拽功能export default {// 混入拖拽功能mixins: [draggable],data() {return {dialogVisible: false,rtsp1: 'rtsp://your-stream-url'};},methods: {DialogOpen(RtspUrl) {this.dialogVisible = true;},handleClose() {this.dialogVisible = false;}},};};
</script><style>
/* 在你的 CSS 文件或 <style> 标签中添加 */
::v-deep .el-dialog__wrapper {pointer-events: none !important; /* 禁用遮罩层的点击事件 */
}
::v-deep .el-dialog__wrapper .el-dialog {pointer-events: auto !important; /* 允许对话框内的元素交互 */margin-top: 20vh !important; /* 设置弹框距顶部的距离 */
}
</style>
2. JS
// src/mixins/draggable.jsexport default {mounted() {// 获取对话框的头部元素const dialogHeaderEl = this.$el.querySelector('.el-dialog__header');// 获取整个对话框元素const dragDom = this.$el.querySelector('.el-dialog');// 设置头部的光标为移动样式,表示可以拖动dialogHeaderEl.style.cursor = 'move';// 函数用于获取元素的计算样式const getStyle = (function () {if (window.document.currentStyle) {// 对于旧版 IE,使用 currentStylereturn (dom, attr) => dom.currentStyle[attr];} else {// 对于现代浏览器,使用 getComputedStylereturn (dom, attr) => getComputedStyle(dom, false)[attr];}})();// 鼠标按下事件处理程序dialogHeaderEl.onmousedown = (e) => {// 计算鼠标点击点相对于对话框头部的偏移量const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;// 获取对话框的宽度和高度const dragDomWidth = dragDom.offsetWidth;const dragDomHeight = dragDom.offsetHeight;// 获取浏览器窗口的宽度和高度const screenWidth = document.body.clientWidth;const screenHeight = document.body.clientHeight;// 计算对话框拖动的边界const minDragDomLeft = dragDom.offsetLeft; // 左边界// 右边界const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;const minDragDomTop = dragDom.offsetTop; // 上边界// 下边界const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight; // 获取对话框当前位置的样式(左和上),处理 px 或百分比单位let styL = getStyle(dragDom, 'left');let styT = getStyle(dragDom, 'top');// 处理百分比单位,将其转换为绝对像素值if (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100);styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100);} else {// 处理 px 单位styL = +styL.replace(/px/g, '');styT = +styT.replace(/px/g, '');}// 鼠标移动事件处理程序document.onmousemove = function (e) {// 计算新的位置let left = e.clientX - disX;let top = e.clientY - disY;// 边界处理:防止对话框拖动超出边界if (-left > minDragDomLeft) {left = -minDragDomLeft;} else if (left > maxDragDomLeft) {left = maxDragDomLeft;}if (-top > minDragDomTop) {top = -minDragDomTop;} else if (top > maxDragDomTop) {top = maxDragDomTop;}// 更新对话框的位置dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;};// 鼠标释放事件处理程序document.onmouseup = function () {// 解除鼠标移动和释放事件的绑定document.onmousemove = null;document.onmouseup = null;};};}
};};
四. 请求RTSP视频流播放,请看
前端请求RTSP视频流播放https://blog.csdn.net/weixin_65793170/article/details/140049511?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22140049511%22%2C%22source%22%3A%22weixin_65793170%22%7D
五. 小结
通过以上步骤,我们实现了一个可拖动的弹框,并在其中播放实时视频。我们使用了Vue.js和Element UI,并通过自定义混入实现了拖拽功能。同时,通过设置pointer-events
属性,确保在拖拽弹框时底层元素仍然可以操作。
相关文章:

前端使用Vue和Element实现可拖动弹框效果,且不影响底层元素操作(可拖拽的视频实时播放弹框,底层元素可以正常操作)
简述:在前端开发中,弹框和实时视频播放是常见的需求。这里来简单记录一下,如何使用Vue.js和Element UI实现一个可拖动的弹框,并在其中播放实时视频。同时,确保在拖拽弹框时,底层元素仍然可以操作。 一、项目…...

文华财经多空K变色支撑压力画线趋势波段指标公式
文华财经多空K变色支撑压力画线趋势波段指标公式: VERTLINE(TIME0900,RGB(128,128,255)),DOT; VERTLINE(TIME2100,COLORBLACK),DOT; HH:HHV(HIGH,26); LL:LLV(LOW,26); HH1:BARSLAST((HH > REF(HH,1))); LL1:BARSLAST((LL < REF(LL,1))); PARTLINE((HH…...

tomcat9漏洞CVE-2024-23672
序号 漏洞名称 影响主机个数 1 Apache Tomcat 安全漏洞(CVE-2024-23672) 1/1 2 Apache Tomcat 输入验证错误漏洞(CVE-2024-24549) 1/1 漏洞名称:CVE-2024-23672 影响版本:tomcat9.0.0-M1 to 9.0.85;tomcat8.5.0 to 8.5.98 处理…...

ChatGLM-6B入门
ChatGLM-6B ChatGLM-6B 一、介绍 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型,基于 General Language Model (GLM) 架构,具有 62 亿参数。结合模型量化技术,用户可以在消费级的显卡上进行本地部署(INT4 量化级别下最…...

项目实战--Spring Boot + GraphQL实现实时数据推送
背景 用户体验不断提升而3对实时数据的需求日益增长,传统的数据获取方式无法满足实时数据的即时性和个性化需求。 GraphQL作为新兴的API查询语言,提供更加灵活、高效的数据获取方案。结合Spring Boot作为后端框架,利用GraphQL实现实时数据推…...

ASPICE是汽车软件开发中的质量保证流程
复杂的汽车系统对软件的质量和可靠性提出了极高的要求。为了确保汽车软件的高质量和可靠性,ASPICE(Automotive SPICE,汽车软件过程改进和能力确定)流程应运而生。本文将对ASPICE流程进行详细介绍。 一、ASPICE概述 ASPICE是汽车行…...

Linux调试器-gdb使用以及Linux项目自动化构建工具-make/Makefile
目录 1.gdb背景2.开始使用gdb3.make/makefile 背景4.实例代码5.依赖关系6.依赖方法7.原理8.项目清理 1.gdb背景 程序的发布方式有两种,debug模式和release模式 Linux gcc/g出来的二进制程序,默认是release模式 要使用gdb调试,必须在源代码生…...

Html5前端基本知识整理与回顾下篇
今天我们继续结合发布的Html5基础知识点文档进行复习,希望对大家有所帮助。 目录 列表 无需列表 有序列表 自定义列表 样例 表格 基本属性 编辑 相关属性 Border Width Height 编辑 表格标题 编辑 表格单元头 合并单元格 垂直单元格合并 水…...

vmware 虚拟机扩容 centos 硬盘扩容 kylinos v10扩容
1. 虚拟机先扩容 1.1 关机,并点击系统,让他是点选状态,但是没开机 1.2 右击,点击最下方设置,点击硬盘 1.3 点击扩展磁盘 1.4 选择你需要扩容的大小,数字为总大小 完成提示: 磁盘已成功扩展。您…...

什么样的开放式耳机好用?,五大超强卷王单品推荐!
对于热衷尝试不同耳机类型的小伙伴们而言,经过对佩戴舒适度、音质清晰度及电池续航能力的全面考量,开放式蓝牙耳机因其卓越的平衡性脱颖而出,成为多数人的心头好。其轻巧设计不仅保证了长时间佩戴的舒适感,还兼顾了音质与续航的双…...

java使用poi-tl模版引擎导出word之饼状图生成及循环批量生成饼状图
文章目录 一、单个饼状图生成1.word模版制作2.编写接口完整代码3.导出结果 二、批量生成饼图1.word模版制作2.编写接口完整代码3.导出结果 一、单个饼状图生成 1.word模版制作 在word中创建一个饼状图,点击图表,点击“文本选项”,在可选文字…...

指定版本ceph-common安装
如,安装15.2.13的ceph-common PACKAGE_NAMEceph-common CEPH_VERSION15.2.13 wget -q -O- https://download.ceph.com/keys/release.asc | sudo apt-key add - echo deb http://download.ceph.com/debian-${CEPH_VERSION}/ $(lsb_release -sc) main | sudo tee …...

C++语言特性——关键字(static、volatile、extern、const、mutable、inline)
注意: 本内容为摘抄网上的学习资料,作为个人笔记使用,如有侵权, 立刻删除。 C语言特性 1.关键字 (1)static static全局变量和普通全局变量 面试高频指数:★★★☆☆ 相同点: 存储方式&…...

在Ubuntu 16.04上安装和配置VNC的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 ###介绍 VNC,即“Virtual Network Computing”,是一种连接系统,允许您使用键盘和鼠标与远程服务器上…...

@RequestBody注解的使用及源码解析
前言 RequestBody 注解是我们进行JavaEE开发,最常见的几个注解之一,这篇博文我们以案例和源码相结合,帮助大家更好的了解 RequestBody 注解 使用案例 1.自定义实体类 Data NoArgsConstructor AllArgsConstructor public class User {priv…...

linux 服务器数据备份 和 mysql 数据迁移
查看域名ip 查看程序所处文件位置 list open files 1、 lsof -i :port 查看端口获取进程 pid 2、lsof -i pid 1、scp 下载服务器文件到本地 security copy protocol 2、导出服务器 mysql 数据库(表)到本地 mysqldump是MySQL自带的一个实用程序&…...

安防视频监控/云存储/视频汇聚EasyCVR平台播放设备录像不稳定,是什么原因?
安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,EasyCVR基于云边端一体化架构,具有强大的数据接入、处理及分发能力,可提供7*24小时实时高清视频监控、云端录像、云存储、录像检索与回看、智能告警…...

S32V234平台开发(一)快速使用
快速使用 准备供电复位选择串口通信启动选择显示登陆系统 准备供电 s32v234可以使用两种电源供电 一种是左边电源端子,一种是右边电源适配器(12V 3A) 注意:不要同时使用两种电源同时供电 复位选择 Pressing POR RESET pulls active low EXT_POR signal on S32V2…...

C# 如何防止反编译?C#程序加密混淆保护方法大全
在C#开发中,由于.NET程序集(assemblies)是基于中间语言(Intermediate Language, IL)编译的,这些程序集可以被反编译回接近原始源代码的形式。为了保护代码不被轻易反编译,开发者可以采取以下几种…...

企业数字化转型中的低代码开发平台应用:释放创新潜能
随着信息技术的飞速发展,企业数字化转型已成为行业趋势。在这场转型浪潮中,低代码开发平台以其独特的优势,成为众多企业实现快速迭代、高效创新的得力助手。本文将深入探讨低代码开发平台在企业数字化转型中的应用,以及如何帮助企…...

因为目录问题开通的另外一个网站的美化过程
起 其实也不完全是目录,是查找问题过程中看到别人的界面好好看,而且确实那个目录很吸引我…… 然后我在csdn看了半天,看到一个有目录的我赶紧换上,结果并不能显示。而且把原来黑色模式的给搞没有了——它居然要vip了……所以………...

RedHat运维-Ansible自动化运维基础24-寻找问题常用模块
1. ansible.builtin.uri模块的作用是____________________________; 2. ansible.builtin.uri模块的作用是____________________________; 3. ansible.builtin.uri模块的作用是____________________________; 4. 试着用ansible.builtin.uri模块…...

windows USB 设备驱动开发-USB带宽
本文讨论如何仔细管理 USB 带宽的指导。 每个 USB 客户端驱动程序都有责任最大程度地减少其使用的 USB 带宽,并尽快将未使用的带宽返回到可用带宽池。 在这里,我们认为USB 2.0 的速度是480Mbps、12Mbps、1.5Mbps,这分别对应高速、全速、低速…...

哪有什么「历史的垃圾时间」,有的只是你对自己的不诚实
时间不会服从任何人的管理,它只会自顾自地流逝。— 李笑来《把时间当作朋友》 hi,欢迎来到我的杂货铺。 最近有个概念火了,叫做「历史的垃圾时间」。 看了下相关的文章,大概是在宣扬奥地利派经济学家米赛斯关于历史的一段论述&a…...

全志A527 T527 android13支持usb摄像头
1.前言 我们发现usb摄像头在A527 android13上面并不能正常使用,需要支持相关的摄像头。 2.系统节点查看 我们查看系统是否有相关的节点生成,发现/dev/video相关的节点已经生成了。并没有问题,拔插正常。 3.这里我们需要查看系统层是否支持相关的相机, 我们使用命令进行…...

邦芒贴士:做到这8点工作生活中才能少犯错
我们之所以需要重点关注这些问题,就是为了确保自身利益能够最大化。如果大家在平日活动里能避免犯下这些错误,就会发现自己的工作效率将会大幅提升,更不用提生活也会变得愉快了很多。 大家如果曾经从建立待办事项列表中获得了很多好处的话&a…...

代码随想录算法训练营第7天
454.四数相加 题目链接:454. 四数相加 II - 力扣(LeetCode) 视频/文档链接:代码随想录 (programmercarl.com) 第一想法 遍历数组num1,num2,计算其和出现的数量,放入map集合中,键为和࿰…...

苹果开发者取消自动续费
文档:https://support.apple.com/zh-cn/118428 如果没有找到订阅,那就是账号不对 取消订阅后,就不会自动续费了,如果不放心,可以把付款绑定的方式也取消...

Phospho:LLM应用的文本分析利器
今天向大家介绍phospho文本分析平台,专门为大型语言模型(LLM)应用程序设计。它可以帮助开发者从用户或应用程序的文本消息中检测问题、提取洞见、收集用户反馈,并衡量成功。作为一个开源项目,phospho允许开发者查看和修…...

微深节能 料场堆取料无人操作系统 格雷母线
随着工业自动化的快速发展,料场堆取料作业正逐步向无人化、智能化转型。格雷母线高精度位移检测系统在料场堆取料无人操作系统中的应用,成为这一转型过程中的重要技术突破。本文将详细介绍格雷母线及其在料场堆取料无人操作系统中的应用,并探…...