夜空孤狼啸的博客

Vue3 Canvas选择器组件实现高性能交互选择 摘要：本文介绍了一个基于Vue3 Composition API和Canvas技术实现的交互式网格选择器组件。该组件采用8×12网格布局，支持PC端和移动端的拖动选择操作，提供添加和移除两种选择模式。通过Canvas绘制整个选择界面，相比传统DOM渲染显著提升了性能，特别是在处理大量选项时。组件实现了响应式设计，自动适应容器尺寸，并支持通过props传入初始选项列表。关键技术点包括：Canvas事件处理、坐标转换、选择框绘制以及状态管理。该方案适用于需要高

SnapDOM是一款高效精准的DOM截图工具，相比传统的html2canvas，它具备显著优势：速度提升93倍，完美还原CSS样式、伪元素、Shadow DOM等复杂内容，支持SVG/PNG/JPG/WebP等多种输出格式。虽然存在跨域资源、iframe内容截取等限制，但SnapDOM凭借其超高性能和卓越还原度，成为前端截图的首选方案。安装简单，支持NPM/CDN/ES Module等多种方式，提供灵活的API和丰富的导出选项，适用于各种网页截图场景。

Vue拖拽组件库横向对比与ES Drager详解 摘要：本文横向对比了4款主流Vue拖拽组件库，重点推荐了Vue3专用库ES Drager。对比表显示各库在框架支持、核心功能和学习曲线上的差异，其中ES Drager在图形操作方面表现突出（支持拖拽/缩放/旋转/倾斜），社区活跃度达4星。ES Drager提供丰富的API（如边界检测、网格吸附、碰撞检测等）和可视化编辑能力，其官网展示的动态效果（如元素变形、网格对齐）直观体现了专业级交互功能。该库轻量高效，特别适合需要高级图形操作的Vue3项目开发。

WebSocket是一种用于在Web应用程序和服务器之间建立实时、双向通信的协议，通过单一TCP连接实现持久化数据传输。其优势包括实时性、双向通信和减少网络负载，但劣势在于需要浏览器和服务器支持、额外开销以及潜在的安全问题。WebSocket协议基于TCP，支持二进制和文本数据，通过握手协议建立连接，并保持开放状态以实时传递数据。WebSocket的生命周期包括连接建立、开放、关闭和关闭完成四个阶段，需处理连接关闭事件以确保应用稳定性。心跳机制用于检测客户端与服务器的连接状态，通过定时发送ping数据包确认

注意：这里需要转换的文本 有指定格式（大家可以根据具体情况具体转换，方法一样的）： tab分隔(\t) 以及换行（\n）

vscode 配置用户代码片段

在前端开发中，Base64编码和File对象是处理文件数据时经常使用的两种方式。Base64编码常用于将二进制数据转换为文本格式，便于在网络中传输。而File对象则提供了处理用户上传文件的接口。本文将深入探讨这两种数据格式之间的转换，并通过多个示例来展示如何在实际开发中运用这些技术。

前端用input读取 .xlsx文件的内容项目中我用的ant-design-vue，不过用input一样的大同小异注意区分xlsx库和node-xlsx库的使用环境。

只有一个 exe 安装包，前提是这个安装包是electron写的。使用工具解压就可以了，先安装这个工具。

邮箱授权码: 邮箱授权码需要开通，以QQ邮箱为例，其它大同小异。

从零搭建vue3 + vite + ts 项目必备This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 SFCs, check out the script setup docs to learn more.安装项目规范npm install eslint --save-dev#oryarn add eslint --devnpx e

前端项目重新打包部署后，由于用户没及时更新页面，导致配置存的还是旧逻辑值，引发了线上问题；所以进行版本更新的通知功能就很有必要上马了。

luckyexcel 编辑预览excel文件支持后端传文件流预览编辑，也支持选择本地文件编辑预览

前端各种文本文件预览 文本编辑excel预览编辑 pdf预览word预览 excel下载pdf下载word下载各种文本文件预览（pdf, xlsx, docx, cpp, java, sql, py, vue, html, js, json, css, xml, rust, md, txt, log, fa, fasta, tsv, csv 等各种文本文件）其中 除pdf，xlsx，docx之外的文本还可以修改，xlsx想要修改看我另一篇博客【先空着这两天就补上去】

借助gsap效果去实现的，官网特效常用效果

js实现图片放大镜功能，简单明了，js图片放大镜 写购物项目的时候，需要放大图片，这里用js写了一个方法，鼠标悬浮的时候放大当前图片

在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不同项目必须依赖不同版本的NodeJS运行环境，这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，nvm就是为解决这个问题而产生的，他可以方便的在同一台设备上进行多个node版本之间切换。 无须卸载现有版本，可同时安装不同的版本，有使用项目需要在linux，mac、windows三个系统中运行，所以三个系统最好都安装nvm

大屏项目中的适配屏幕大小缩放原理demo还原。v-scale-screen 原理。// 这里可以写个防抖。

TypeScript 泛型工具类型在实际项目中的应用在TS中内置了一些常用的工具类型, 用来简化我们TS中的一些常见操作 这些泛型工具类型都是基于泛型实现的, 并且是内置的, 我们也可以直接在代码中使用。

在前端项目实际开发过程中，经常需要对各种各样的类型进行下载，因为我不是前端出生，就自己在网上学习最后使用到自己的项目当中，代码冗余等低级错误还请多多指导。我发现用 Blob 二进制进行文件下载的比较多，我就采用了这一方式。下面是一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。

前端虚拟滚动列表 vue虚拟列表。在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；大数据量列表性能优化，减少真实dom的渲染看图：绿色是显示区域，绿色和蓝色中间属于预加载：解决滚动闪屏问题；大致了解了流程在往下看；

前端将html导出pdf文件解决分页问题

前端导出word文件的多种方式、导出excel文件 纯前借助word模板端导出word文件 （推荐，前端借助word模板导出word，需要的依赖库：docxtemplater，pizzip，jszip-utils，file-saver，前端导出excel文件，需要的依赖库：node-xlsx，当让也可以借助xlsx库，这个看自己选择，只要实现客户想要的功能就行。

注意：需要相邻选择器标签的用clip属性去隐藏，其他的可隐藏的css属性都被定义为行内样式且权重最好，这也算是在找漏洞吧；推荐使用css，js要遍历所有div，增加性能损耗。在main.ts文件中全局引入。

vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本，同样是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景，本人在工作台和多选项卡环境下实践过，比自己实现的拖拽效果优雅多了，使用的方法也非常简单但和vue2版本的用法有一些vue语法上的区别，本文档将会列举全部的属性和事件。

作为开发人员，利用这些工具无疑将增强您的项目，并使其在竞争日益激烈的数字环境中脱颖而出。网络借鉴，如有侵权，联系我删除。

前端预览pdf的几种方法

#微前端【代码】项目中使用firame引入html 解决路由错乱问题。在项目中使用firame引入html，引入的html中有路由跳转，当点击html页面中的路由跳转时，浏览器history会记录次路由，当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由，这样不符合逻辑解决方案如下：主要是由于浏览器history记录了iframe嵌入页面的路由信息，这个信息不论是iframe内的地址跳转，还是iframe src的切换，都会被记录，下面给出解决方案

crontab 是一个用于创建、编辑和管理用户的定时任务的命令，它可以让用户在指定的时间自动执行指定的命令或脚本。service cron status 查看服务运行状态service cron start 启动服务service cron stop 停止服务service cron restart 重启服务 每次设置完记得重启一下

一般不对遇到这种问题，除非想用ssh拉去代码，但是不同的项目有在不用的gitee账号上面存放。注意这里的 id_rsa 的权限要更改为600， chmod 600 /home/dell/.ssh/id_rsa。 注意第二个的 Host 是agitee.com。先用下面命令新建两个公钥（注意换名字）

前端项目常用的方法

我们在使用linux系统开发的过程中，经常会遇到一些重复的操作，想copy, push等等。这个时候我们就可以自己编写一个sh脚本，使用sh脚本操作这些重复的动作。直接 sh xx.sh脚本执行命令即可/bin/sh 和 #!/bin/bash 都是脚本文件的开头，用来指定脚本文件的解释器。其中 #!/bin/sh 指定的是 Bourne shell 解释器，而 #!/bin/bash 指定的是 Bash shell 解释器。

html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus，本次项目中，需要引入github中别人写好的插件，插件比较大，没有方法直接在自己项目中，把别人的项目打包合并生成html（类似于前端项目打包生成的 dist ），修改这里面的html，这种情况要么用原生js写或者jquery还相对快一些，那为什么不直接用vue语法呢？哈哈哈，下面就教你怎么写。这里用antDesignVue4.0直接上代码，

/ touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。console.log(wheelDelta + ‘滑轮向上滚动’);console.log(wheelDelta + ‘滑轮向下滚动’);// touchmove: //手指在屏幕上滑动式触发。// touchstart: //手指放到屏幕上时触发。// touchend: //手指离开屏幕时触发。//火狐使用DOMMouseScroll绑定。//其他浏览器直接绑定滚动事件。

把你刚才stash到本地栈中的代码pop到本地（合并代码）（也可以用git stash apply，区别：使用apply恢复，stash列表中的信息是会继续保留的，而使用pop恢复，会将stash列表中的信息进行删除。如果有冲突，先备份自己的代码，（可以往下看，代码冲突合并），将自己的代码合并进去，然后再提交代码。**情况一：**如果你git status 查看了当前状态发现都是你修改过的文件，都要提交，那么你可以直接使用 git add . 就可以把你的内容全部添加到本地git缓存区中。

注意安装animate.css版本，我这里用的v4.1.1 ，animate__animated是基类必须使用的(因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！在main.ts文件中引入。

electron应用重启，开机自启动（electron开发常用的方法、优化方案）electron中屏幕全屏，最大化，最小化，恢复，缩放思路：用nodejs去先定时重启应用，在杀死对应软件的进程（一定要定时），不要用setTimeout。注意：这里的shelljs我用的shelljs插件，可以用node去执行cmd命令。electron.js 主进程中写监听事件。页面中写一个重启应用的函数。

国内npm源镜像（npm加速下载）指定npm镜像nrm 是一个 npm 源管理器，允许你快速地在 npm 源间切换。

按需加载窗口先创建后隐藏，初始化后再展示web性能优化优化主进程

前端写ip地址框输入