dhz654321-CSDN博客

原创基于Vue实现可拖动对话框组件

基于Vue实现可拖动弹框组件前言一、代码实现总结前言近期项目中要用到可拖动弹框组件，由于项目使用的组件库element-ui中并未提供该组件，故笔者只能自己动手封装，本文将详细封装过程分享给大家。提示：以下是本篇文章正文内容，下面案例可供参考一、代码实现代码如下（示例）：<template> <el-container ref="dialog" v-show="dialogShow" :style="{'width': width}"> <el-he

2021-08-17 11:34:52 778

原创 web端实现视频局部放大功能

PC端视频框选放大功能实现前言一、实现逻辑二、代码实现二、实现效果总结前言近期项目遇到一个需求：视频局部放大功能。具体来讲需要实现监控视频画面向右下方拉框松开后该区域放大显示，且可在已放大视频画面上继续拉框放大，向其他方向拉框松开后视频还原。从刚开始毫无思路到功能的完美实现着实花了不少功夫，接下来笔者将自己的实现过程分享如下：提示：以下是本篇文章正文内容，下面案例可供参考一、实现逻辑播放器画面框选部分区域----》记录框选区域大小及位置----》计算放大倍数----》移动放大后视频使框选部分在

2021-06-29 15:44:40 3339 7

原创 web端实现录音上传功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档基于js-audio-recorder实现录音功能前言1.安装2.调用2.具体实现总结前言最近项目中遇到一个需求：PC端实现录音生成文件并上传至服务器。接下来笔者将自己的实现方式分享出来，欢迎评论交流。提示：以下是本篇文章正文内容，下面案例可供参考示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。1.安装npm i js-audio-recorder2.调用import Recor

2021-06-22 16:26:56 1662 3

原创 element-ui中tree组件双击事件的实现

文章目录前言代码实现总结前言近期，笔者项目中遇到一个需求：实现左侧基于elment-ui tree组件的设备树节点的双击事件。查看element-ui官网后发现，element-ui中tree组件没有提供双击事件，故只能自动动手实现双击事件。elwment-ui tree组件中提供了单击事件，故我基于单击事件实现双击事件。代码实现代码如下（示例）：......<el-tree :data="data" :props="defaultProps" @node-clic.

2021-05-06 15:43:40 2585 1

原创 element-ui中tree组件实现树节点可拖拽但不改变层级关系

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、代码实现总结前言近期，笔者项目中遇到一个需求：实现将左侧基于elment-ui tree组件的设备树节点拖动至右侧播放窗口进行播放。实现功能后发现被拖动的树节点层级关系被改变，显然这不是我想要的结果。经过一番研究，终于实解决了这个问题：实现树节点可拖动但不改变位置。提示：以下是本篇文章正文内容，下面案例可供参考一、代码实现代码如下（示例）：......<el-tree :data="data"

2021-05-06 10:26:48 2629 2

原创基于vue实现大文件分割上传

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言代码实现：总结前言文件上传是一个比较常见的功能，但是如果上传的文件比较大，上传速度会非常慢。这时我们就会想到将文件分割后上传，接下来笔者将自己的实现方式和大家分享。提示：以下是本篇文章正文内容，下面案例可供参考代码实现：代码如下（示例）：handleUploadForm() { this.createWebsocket() this.startTime = new Date() let _this =

2021-04-28 15:50:22 1220

原创基于liveplayer实现语音对讲功能

文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言视频监控提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport war

2021-04-27 14:48:29 1153 3

原创视频截图功能实现及遇到的坑点

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言最近项目有个需求：实现多屏展示页面一键截屏功能，通俗点讲就是将多屏展示页面正在播放的所有监控画面截图保存在一张图片上并下载到本地。接下来笔者将分享实现该需求的思路及过程中遇到的问题和解决方案。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

2021-04-25 10:49:11 1267

原创 Vue项目集成LivePlayer播放器

前言视频播放器在视频监控项目中必不可少，虽然H5中提供了video标签，但是它不支持摄像头所提供的视频格式，故无法满足视频监控项目的需求。基于封装一款满足视频监控项目需求的视频播放器技术门槛相对较高，所以选择一款开源视频播放器是一种不错的选择。...

2021-04-22 15:59:00 4339 1

原创基于vue.js实现全屏显示功能

实际项目中经常会遇到需要需要将页面中某一部分全屏显示的需求，实现此需求的方式有很多，本文将介绍基于vue的实现方式

2021-04-16 15:05:29 797

原创多屏展示页面自适应布局实现

监控项目中多屏展示功能实现分屏页面草图系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入在监控项目中通常都会有多屏展示（或分屏展示）的需求，即在同一个页面

2021-04-14 16:12:16 511

weixin_43415075的博客