- 博客(38)
- 收藏
- 关注
RSS订阅原创 Vue3 封装优雅的全局状态提示组件（StatusMessage）
在前端项目开发中，全局状态提示（如操作成功、失败提示）是高频交互需求。市面上的 UI 库（Element Plus、Ant Design Vue）虽提供了 Message 组件，但为了适配项目视觉风格、实现更轻量的定制化，手动封装全局提示组件会更灵活。本文基于 Vue3 组合式 API，手把手教你封装一个支持自定义类型、自动关闭、消息堆叠的全局 StatusMessage 组件。
2025-12-05 15:44:09
344
原创 前端无感刷新 Token 的 Axios 封装方案
本文介绍了基于Axios实现无感刷新Token的解决方案。当用户Token过期时，系统自动使用刷新Token获取新Token并重新发起请求，确保用户操作不受中断。实现思路包括：拦截请求添加Token、检测Token过期错误、使用刷新Token获取新Token、处理并发请求避免多次刷新。代码示例展示了如何通过axios拦截器处理Token存储、刷新和请求重试流程，包括处理401错误、维护请求队列、防止重复刷新等关键逻辑。当刷新Token失败时，系统会自动清除Token并跳转登录页，确保安全性。
2025-08-21 16:10:44
479
原创 前端调用阿里云接口语音合成演示
本文介绍了通过Node.js代理服务器解决前端调用阿里云语音合成API的跨域问题。前端页面通过本地代理接口(tts-proxy)发起请求，代理服务器转发至阿里云API并处理CORS问题。实现包括：1)Express服务器设置CORS响应头；2)请求转发和音频数据处理；3)完善的错误捕获机制。使用步骤为安装依赖后启动代理服务，前端即可通过本地接口调用语音合成功能。该方案有效规避了浏览器跨域限制，同时保持了API调用的安全性和可靠性。
2025-08-20 14:48:14
351
原创 封装class实现Canvas语音波形绘制
摘要：VoiceWaveform类使用Canvas绘制实时音频波形，支持动态调整尺寸、平滑过渡和颜色自定义。关键功能包括：1)初始化音频分析器获取波形数据；2)动画循环绘制实时/静态波形；3)支持平滑参数调整消除抖动；4)高DPI适配处理。示例展示与MediaRecorder的集成，实现录音时实时波形显示。该组件适用于Web音频应用，提供可视化反馈，参数可配置，支持销毁清理资源。（150字）
2025-08-19 11:49:08
252
原创 JavaScript 实用工具方法小全
本文介绍了8个实用的JavaScript工具函数：1.精确获取数字小数位数，支持科学计数法；2.深度对象比较的递归实现；3.安全的深拷贝函数，保留特殊对象类型；4.防抖与节流函数的实现与对比；5.增强版类型检测，支持多种数据类型判断；6.对象数组按属性去重；7.高级数字格式化，支持千分位和小数位控制；8.带错误处理的JSON安全解析。这些函数涵盖了数字处理、对象操作、性能优化等常见场景，提供了可靠且高效的解决方案。
2025-08-16 13:15:00
450
原创 Vue3 路由缓存实战：从基础到进阶的完整指南
本文介绍了Vue3中实现路由缓存的完整方案。通过<keep-alive>组件结合路由元信息meta.keepAlive，可以轻松实现组件状态保留。关键点包括：1) 在路由配置中标记需要缓存的组件；2) 使用route.fullPath作为key避免缓存冲突；3) 通过include/exclude精确控制缓存范围；4) 利用onActivated/onDeactivated处理缓存组件的生命周期。此外还介绍了动态缓存控制、滚动位置保持、手动清除缓存等进阶技巧，帮助开发者构建更流畅的用户体验。
2025-08-15 10:29:22
871
原创 Uni-App 双栏联动滚动组件开发详解 (电梯导航)
本文介绍了一个双向联动的滚动组件实现方案，包含左右两栏同步滚动功能。组件采用Vue.js开发，左侧为导航栏，右侧为内容区，支持点击导航自动定位对应内容区块，同时滚动内容时自动高亮对应的导航项。实现要点包括：通过scroll-into-view实现双向定位，使用uniAPI计算元素位置信息，采用Flex布局自适应容器高度，并加入填充高度优化滚动体验。组件通过props接收数据，具有良好的可复用性，适合各类分类浏览场景。
2025-03-20 11:19:56
700
原创 如何实现具备自动重连与心跳检测的WebSocket客户端
本文介绍了一个基于原生WebSocket API封装的稳健客户端实现，具备自动重连、心跳检测、消息队列等核心功能。该方案采用指数退避重连策略和双向心跳检测机制，确保长连接的稳定性。关键技术点包括：1) 智能重连控制，通过延迟算法优化网络恢复效率；2) 消息可靠性保障，采用独立队列管理未发送消息；3) 状态分离设计，配置参数与运行时状态解耦；4) 完善的事件监听机制，支持多监听器配置。适用于聊天室、实时监控等需要持久化连接的场景，提供开箱即用的高可靠WebSocket通信能力。
2025-03-13 11:23:39
872
原创 大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版）
在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案。：translate(-50%,-50%)配合父容器的position: relative实现完美居中。：通过动态调整scale的x/y轴实现不同比例下的完美适配。：通过定时器实现200ms延迟计算，避免频繁重绘。当视口更宽时：保持高度基准，横向自适应。当视口更高时：保持宽度基准，纵向自适应。在根组件中混入该模块。
2025-02-21 10:02:03
1299
原创 封装websocket
本文将介绍两种不同的WebSocket客户端封装方法：使用函数封装和使用类封装。我们将分析它们的实现方式、特点和适用场景，以及如何根据项目需求选择合适的封装方式。
2024-08-21 16:48:02
1439
原创 vue3在元素上绑定自定义事件弹出虚拟键盘
(给元素绑定自定义事件,input获取光标直接可以显示虚拟键盘,方便操作!// 检查dom是否是input元素return dom;// 如果不是input元素，且有子节点，则递归查找子节点// 如果找到input元素，立即返回// 如果没有找到input元素，返回null//引入仓库if (!input) {return console.log("绑定错误,没有input元素");//保存input元素//给input注册input事件。
2024-07-24 10:39:44
1620
3
原创 自定义组件如何使用v-model
当我们在自定义组件的时候需要传多个参数并且需要修改的时候,就会产生冲突!这个选项允许我们自定义组件的。在上述示例中，我们定义了一个自定义组件。选项，我们可以灵活地定义自定义组件中。，以实现与父组件的双向数据绑定。在父组件中，我们可以像使用原生的。下面是一个示例，展示如何使用。来获取和修改父组件中的数据。的行为，使其适应我们的需求。在组件的模板中，我们使用。来控制按钮的文本，并通过。在父组件中，我们可以通过。事件来更新父组件的数据。选项，我们将父组件中的。属性，并且可以直接访问。
2024-03-30 11:31:51
432
原创 前端上传图片后如何回显图片
1.使用FileReader API：这是一种常见的方法。在用户选择图片后，可以使用FileReader对象读取图片文件，并将其转换为Base64编码的字符串。然后，将该Base64字符串设置为标签的src属性，即可在页面上显示图片。2.使用URL.createObjectURL()：这是另一种常见的方法。在用户选择图片后，可以使用URL.createObjectURL()方法创建一个临时的URL，然后将该URL设置为标签的src属性，从而在页面上显示图片。
2024-03-05 16:15:11
1735
原创 前端导出EXCEL
定义了一个名为excelDownres和type。res是包含响应数据的对象，type是要导出的文件类型。如果type未提供，则默认使用 Excel 文件的 MIME 类型。使用Blob构造函数创建了一个 Blob 对象。它接受一个包含响应数据的数组和一个配置对象作为参数。配置对象中的typ属性指定了 Blob 对象的 MIME 类型，用于指定要创建的文件类型。从响应的头部中获取文件名。首先，它从对象中获取头部字段的值，该字段通常包含有关文件的信息。然后，使用正则表达式RegExp对象匹配出文件名，并通过。
2024-02-26 16:29:55
632
原创 封装组件实现容器文字过长显示省略号 + 鼠标移入显示提示框+自动判断文字长度是否显示提示框
封装组件实现容器文字过长显示省略号 + 鼠标移入显示提示框+自动判断文字长度是否显示提示框
2024-01-20 14:16:38
636
原创 用户电脑没有相应字体怎么办?
在前端开发中想要让页面变得富有创意,与众不同还要美观,字体是个不可或缺的配置。但是有时候会遇到好看的字体用户电脑中没有安装,显示不出来的尴尬.怎么办呢?我给大家介绍一种解决方法。
2023-08-16 17:07:59
904
原创 H5的拖拽事件与FileReader对象
对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用。对象指定要读取的文件或数据。其中File对象可以是来自用户在一个。对象,也可以来自拖放操作生成的。对象,还可以是来自在一个。元素上选择文件后返回的。
2023-06-29 11:26:28
470
原创 实现在H5移动端点击分享按钮唤醒手机内的钉钉、微信或者QQ等特定App
需要注意的是，不同的App的Custom Scheme格式可能不同，您需要根据App的开发文档进行设置。同时，由于Custom Scheme在一些浏览器中可能会被禁用，因此在代码中添加了一个定时器，如果在2秒内没有打开App，则跳转到App下载页面。
2023-04-10 09:56:43
1991
原创 自定义Vue指令：监听某个元素的尺寸变化 (ResizeObserver API)
本文介绍了如何创建Vue自定义指令来高效监听元素尺寸变化。通过使用ResizeObserver API和WeakMap存储处理函数，解决了传统window.resize事件性能低下的问题。实现步骤包括：创建自定义指令文件、全局注册指令、在组件中使用指令。核心原理是利用ResizeObserver精确监听元素变化，配合WeakMap防止内存泄漏，相比传统方法具有更高的性能和精确性，特别适合需要响应元素尺寸变化的场景如图表渲染等。
2023-03-27 10:11:20
339
原创 如何实现大文件上传
既然大文件上传不适合一次性上传，那么将文件分片散上传是不是就能减少性能消耗了。分片上传就是将大文件分成一个个小文件（切片），将切片进行上传，等到后端接收到所有切片，再将切片合并成大文件。通过将大文件拆分成多个小文件进行上传，确实就是解决了大文件上传的问题。因为请求时可以并发执行的，这样的话每个请求时间就会缩短，如果某个请求发送失败，也不需要全部重新发送。
2022-12-27 11:03:48
400
原创 JavaScript删除字符串中指定字符的四种方法
replace()方法用于将特定字符或字符串替换为其他字符或字符串。参数：第一个参数是待替换的字符或字符串，第二个参数是替换为的字符或字符串。可以将第一个参数设为要删除的字符，将第二个参数设为空字符串，这样就可以删除字符串中的指定字符了。但是这个方法只能删除第一次出现的字符，想要将该字符全部删除需要将replace()方法和正则表达式一起使用，它将选择字符串中的每个匹配项并将其全部删除。
2022-11-25 10:50:28
48517
原创 闭坑:vue修改网站图标的时候不要用相对路径
1.我再修改网站图标的时候使用相对路径,跳转一级路由时正常显示。打开调试工具发现相对路径找不到图标位置。2.跳转到到子路由时,显示默认图标。
2022-10-13 09:50:46
154
原创 AILabel修改源码添加旋转功能 和修改源码后,同步到仓库,可以方便组员维护的方法
在项目中使用AILabel完成图片添加标签功能,需要给绘画的标签添加旋转功能,使用也很方便,在shape添加一个rotation属性就可以达到旋转功能。由于AILabel没有旋转功能,我就修改了源码添加了一个旋转功能。有兴趣的朋友可以看看。
2022-10-11 11:57:40
1402
8
原创 router-view的name属性 ＜router-view name=“path“＞＜/router-view＞
一个页面可以配置多个router-view，加上name属性使之区分，在路由配置中需要将。变为components，代码如下。
2022-08-23 15:09:42
4401
原创 在vue项目中使用svg图标
2、在src目录下，新增文件夹，命名为icons，并再icons文件夹下，新增目录index.js文件和svg文件夹，其中svg文件夹里面存放的是svg文件。3、在vue.config.js文件中，配置svg文件，其中chainWebpack里面的内容为svg的配置。在做图标展示时，一般使用fontawesome图标库，只用简单并且只需要下载并引入即可。5、在页面直接使用组件svg-icon，其中incoClass命名等于svg文件的名称。4、在main.js直接引入inco文件夹。
2022-08-20 08:34:40
3471
2
原创 mock使用方法
前端开发往往依赖于后端数据接口，在后端接口就绪之前，前端通常很难开工。Mock 功能就是用来解决这个问题的。有了 Mock 工具之后，前后端可以同步进入开发，后端接口出来之前，前端可以通过 Mock 功能来制造假数据接口来进行开发和调试。......
2022-08-10 20:31:37
443
3
原创 Vue中使用echarts从后台获取数据渲染
methods: {//定义方法//实例化Echarts},},// 图表边界控制grid: {// 距离 上右下左 的距离// 是否包含文本//grid 四条边框的颜色},xAxis: [{// true意思：图形在刻度中间// false意思：图形在刻度之间},// x坐标轴颜色设置// width:8, x轴线的粗细// opcity: 0, 如果不想显示x轴线 则改为 0},},},],yAxis: [{},// y坐标轴颜色设置。...
2022-08-10 20:00:10
2895
3
原创 VUEX模块化处理时，在不同模块调用其它模块的方法
UEX模块化时该怎么在不同模块调用其它模块的state，mutations，actions？下面是我的项目中VUEX模块化目录结构app.js, tag.js, user.js 这些都是将不同模块的state,mutations,actions给抽离出来了，问题来了，我要在user.js中调用其他模块中的state,mutations,actions，该怎么调用呢？...
2022-08-06 19:15:18
795
原创 自定义指令-解决异常图片情况
注册自定义指令Vue.directive('指令名称',{//会在当前指令作用的dom元素插入之后执行//options里面是指令的表达式inserted}})自定义指令可以采用统一的文件来管理src/directives/index.js,这个文件负责管理所有的自定义指令首先定义第一个自定义指令v-imagerror//指令对象会在当前的dom元素插入到节点之后执行//options是指令中的变量的解释其中有一个属性叫做value然后，在main.js。...
2022-08-02 14:25:30
303
原创 javascript高级篇之实现深拷贝的四种方式
进行深拷贝的方法递归函数（推荐使用，项目中使用的更多，更小，更安全）JSON.stringify()和JSON.parse();(不推荐使用,如果遇到Function,Date等类型的变量容易出现一些意料之外的问题)第三方库lodash的cloneDeep()方法（就情况而定，如果项目中原先就有lodash这个第三方库，可以使用，否则还是推荐使用递归函数。不然成本太高。）JQuery的extend()函数(推荐在JQuery项目中使用，其他项目依然推荐是用递归函数)愿读者好运。...
2022-07-29 14:28:14
314
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人