- 博客(667)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 记录-VUE中常用的4种高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/i...
2023-05-06 17:57:00
1071
原创 uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解...
2020-12-08 20:11:00
687
2
原创 uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型(这里随便画了一个)通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分...
2020-09-17 11:54:00
439
原创 网页添加 Live2D 看板娘
参考并转载于https://www.fghrsh.net/post/123.html个人网站添加Live2D 看板娘的方法：在页面中加入以下代码(已经全部处理完，可以根据需求适当修改)：<!DOCTYPE html><html><head> <title>Live2D 看板娘 测试dome</title>...
2020-09-11 09:46:00
2012
原创 uni-app 无法实现全局 Toast？这个方法做到了！
摘要： 本文介绍了在uni-app中实现全局Toast组件的完整解决方案，通过wd-toast组件、Layout插件和Pinia状态管理，解决了传统方案功能受限、无法跨组件调用等问题。核心方案包括：1）基于provide/inject的函数式调用；2）统一布局管理实现全局组件插入；3）状态管理确保Toast正确显示。支持多种提示类型，兼容支付宝小程序，适用于网络请求拦截等场景。 （字数：150）
2025-11-17 14:48:36
553
原创 为什么你的JavaScript代码总是出bug？这5个隐藏陷阱太坑了
JavaScript常见问题与解决方案摘要 本文总结了JavaScript开发中的常见陷阱及解决方案： 变量声明：避免隐式全局变量，使用const和let替代var，防止变量提升问题。 异步处理：避免回调地狱，推荐使用Promise和async/await，务必处理错误。 类型转换：使用严格相等===代替==，利用可选链?.和空值合并??运算符简化代码。 作用域问题：注意this指向问题，使用箭头函数或bind绑定，解决闭包中的变量共享问题。 现代工具： TypeScript提供类型安全 ESLint规范代
2025-11-13 16:49:12
683
原创 JavaScript 中的 map、parseInt 与 NaN：一场关于类型转换与函数调用的深度解析
本文深入剖析了JavaScript中[1, 2, 3].map(parseInt)输出[1, NaN, NaN]这一常见陷阱。主要揭示了三个关键点：1) map方法会传递元素、索引和数组三个参数给回调函数；2) parseInt会把第二个参数当作进制基数，导致索引值被误用为基数；3) 非法基数会产生NaN。文章还提供了正确转换数组的解决方案（如使用Number构造函数或限定参数的箭头函数），并详细解释了NaN的特性和检测方法。通过这个案例，强调了理解语言机制对编写健壮代码的重要性。
2025-11-10 17:01:44
767
原创 JavaScript性能优化：我从50ms降到5ms的7个关键技巧
JavaScript性能优化7大技巧：本文分享了从50ms优化到5ms的实战经验，涵盖DOM操作批处理、事件委托减少监听器、Web Workers多线程处理、Memoization缓存计算结果、requestAnimationFrame动画优化、Typed Arrays高效数据存储，以及V8隐藏类优化等核心方法。通过文档片段、事件委托、离线计算等技巧，结合WASM和GPU加速等高级方案，显著提升前端应用性能。适用于处理大规模DOM更新、复杂计算和动画场景，帮助开发者深入理解JavaScript运行时特性并实
2025-11-08 17:12:35
734
原创 弃用 html2canvas！快 93 倍的截图神器
摘要： SnapDOM是一款高性能网页截图工具，完美替代html2canvas，支持SVG、PNG、JPG、WebP等多种格式导出。其核心优势包括： 超快速度：比传统工具快93倍以上 超高还原度：精准保留CSS样式、伪元素等复杂效果 灵活输出：支持Canvas和多格式图片导出 简单易用：支持npm/CDN安装，提供toPng()等快捷API 免费开源：适用于社交分享、报表导出等场景 注意跨域资源、iframe限制等使用细节，适合现代前端开发需求。
2025-11-04 16:49:54
1036
原创 移动端h5适配方案
本文介绍三种移动端适配方案：1）使用PostCSS插件自动转换px为rem，配合JS动态设置根字体大小；2）采用纯CSS视口单位(vw/vh)方案，通过PostCSS插件自动转换；3）淘宝Flexible方案(未实践)。针对特殊场景(如固定头部)提供了两种处理方式：获取真实offsetHeight或通过工具函数计算适配后的px值。文章包含Vite配置示例和核心实现代码，适用于不同设计稿尺寸的移动端项目适配需求。
2025-10-31 17:34:09
355
原创 【前端效率工具】：告别右键另存，不到 50 行代码一键批量下载网页图片
文章摘要： 本文详细介绍如何开发一个Chrome浏览器插件，实现右键一键批量下载网页所有图片。通过创建manifest.json配置文件和background.js脚本，利用Chrome扩展API（contextMenus、scripting、downloads）完成功能。核心步骤包括：创建右键菜单、注入脚本获取图片URL、批量下载图片（间隔500ms避免限制）。插件加载后，在任意网页右键点击“我要下载所有图片”即可自动保存图片至本地。文章还提供API文档链接和调试方法，适合初学者快速上手浏览器扩展开发。
2025-10-27 17:14:45
437
原创 CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
CSS pointer-events 属性详解 pointer-events 是 CSS3 提供的鼠标事件控制属性，允许开发者决定元素是否响应鼠标交互。主要特性包括： 基本语法：通过 pointer-events: none 可使元素忽略鼠标事件，实现"穿透点击"效果 典型应用场景： 背景图层穿透（覆盖层不阻挡下层交互） SVG 图形区域精确控制（如仅边框响应事件） 弹窗底层交互（点击遮罩关闭弹窗） 特别适用于复杂图层结构、SVG图形和弹窗交互场景，能精细控制页面元素的鼠标事件响应逻辑。
2025-10-22 19:50:42
693
转载 记录---图文并茂讲解nginx中http升级https（部署SSL证书）知识点总结
摘要： 网站升级HTTPS主要出于安全与优化考虑：1. 避免浏览器标记“不安全”警告，提升用户信任；2. 加密数据传输，防止敏感信息泄露；3. 支持摄像头、麦克风等权限调用；4. 提升SEO排名。获取SSL证书可通过免费（如Let’s Encrypt，需每90天续期）或付费渠道（云服务商提供）。部署时需在Nginx配置中引入证书文件（.crt和.key），设置加密协议，并将HTTP请求重定向至HTTPS（监听443端口），同时禁止IP直接访问。完整配置包括证书路径、加密套件及错误页跳转，确保全站安全加密。
2025-10-11 19:23:27
61
转载 记录---window.close()失效 + Chrome浏览器调试线上代码
摘要： 本文记录了解决浏览器window.close()方法失效问题的排查过程。需求要求在单点登录系统中，退出时直接关闭当前页面。测试发现window.close()仅能关闭通过window.open()或直接URL打开的页面。通过本地验证、线上调试，最终确认问题与环境相关。解决方案包括：验证window.open()触发机制、尝试先打开空白页再关闭、调试线上代码并修改验证。关键发现是window.close()的生效依赖特定环境配置，需部署后进一步测试。 关键词： window.close、单点登录、环境
2025-09-29 20:03:00
66
转载 记录---jsApi支付+h5支付
微信支付与H5支付实现方案 本文介绍了在Vue2中实现微信JSAPI支付和H5支付的流程。微信内通过userAgent检测自动屏蔽支付宝，使用JSAPI支付；非微信环境则启用H5支付。 JSAPI支付关键步骤： 通过授权链接获取code并换取openid缓存 调用后端接口生成支付参数，通过WeixinJSBridge发起支付 轮询订单状态，支付成功后跳转 H5支付要点： 支付宝需配置returnUrl，微信需拼接redirect_url并手动传递订单号 支付后通过URL参数out_trade_no查询订单结
2025-09-26 15:22:58
111
转载 记录---vue3项目实战 打印、导出PDF
摘要： 本文介绍了一个商品标签打印模板的Vue组件实现，采用网格布局自动排列标签（50mm×30mm）。模板包含四个主要区域：顶部醒目的价格展示（含原价对比）、商品名称与编码信息、条码区域以及底部库存位置信息。组件支持价格格式化、文本截断等功能，并通过CSS实现渐变背景、价格角标等视觉效果，同时优化打印样式避免阴影。采用响应式设计，确保标签在不同尺寸下保持规整。
2025-09-19 17:14:38
106
转载 记录---Vue3对接UE，通过MQTT完成通讯
摘要： 本文介绍了一个基于Vue3的实时视频流显示系统，通过PixelStreaming技术与Unreal Engine服务器连接，并集成MQTT协议实现消息通信。系统支持实时3D场景渲染、连接状态监控、错误处理与自动重连功能。文章详细说明了项目架构、核心代码实现（包括UE连接初始化、事件监听设置和MQTT连接配置）以及快速开始的安装步骤。该系统为开发者提供了完整的视频流控制和交互解决方案，适用于需要实时渲染和通信的应用场景。
2025-09-17 19:18:42
71
转载 记录---用好了 defineProps 才叫会用 Vue3，90% 的写法都错了
摘要： 本文深入解析Vue3中defineProps的正确使用方式，对比三种主流写法：声明式类型推导（推荐TS项目）、运行时代码校验（兼容Vue2风格）和withDefaults组合（兼顾类型与默认值）。针对常见误区（如解构丢失响应性、类型重复声明）提供解决方案，强调defineProps作为组件契约的核心作用，并分享类型别名、Volar推导等进阶技巧。通过规范写法，可提升组件健壮性、IDE提示完整性和团队协作效率。
2025-09-15 17:02:47
78
转载 记录---前端微服务框架深度对比：无界（Momentum）与乾坤（Qiankun）实战指南
微前端框架对比：无界与乾坤实战解析 本文针对电商后台管理系统场景，对比无界（Momentum）与乾坤（Qiankun）两大微前端框架。通过React/Vue/Angular多技术栈子应用集成示例，分析两者差异： 核心特性：无界基于WebComponent实现自动样式隔离，乾坤需手动配置沙箱；无界无需显式启动，乾坤需调用start()。 开发适配：乾坤要求子应用暴露生命周期钩子，无界兼容性更强。 生产部署：均需Nginx路由配置，但乾坤对动态路由支持较弱。 选型建议：中小项目可选无界快速上手，复杂场景推荐乾坤
2025-09-11 17:42:44
111
转载 记录---让网页像现实世界一样“拿起来，放进去”
HTML5拖拽交互实战指南 本文详细解析了HTML5拖拽功能的核心实现，通过五大关键事件（dragstart/dragend/dragover/dragenter/dragleave/drop）和draggable属性，演示如何创建直观的文件拖放交互。文章包含完整代码示例，涵盖元素样式控制、事件处理及移动端适配技巧，强调响应式设计对提升用户体验的重要性。拖拽功能模拟现实操作逻辑，可显著增强网页交互的自然性和效率，适用于文件上传、任务管理等场景。
2025-09-08 17:53:37
69
转载 记录---基于uniapp，编写一个自定义的日期组件
📅 uniapp自定义日期选择器组件 基于uniapp开发的自定义日期选择器组件，支持年/月/日直观选择，优化传统二次弹窗选择方式。核心功能： 1️⃣ 年份：以选中年份为中心，动态显示前后10年范围列表 2️⃣ 月份：固定12个月直接展示 3️⃣ 日期：智能计算每月天数（含闰年判断），并自动补全前后月份日期以保持日历连续性 4️⃣ 交互：点击输入框触发弹窗，外部点击关闭，内置日期有效性校验 🔧 技术要点： 使用computed动态生成年份/日期列表 通过getDay()计算星期排布，实现跨月日期填充 参
2025-09-05 16:40:13
94
转载 记录---一篇文了解qiankun的代码隔离原理
摘要： qiankun 通过三种沙箱机制实现微前端的 JS 隔离： 快照沙箱（SnapshotSandbox）：挂载前备份全局状态，卸载时恢复，适用于兼容性场景，但性能较差。 单实例沙箱（LegacySandbox）：通过维护新增/修改记录实现高效恢复，仅支持单子应用运行。 代理沙箱（ProxySandbox）：基于 Proxy 为每个子应用创建独立 fakeWindow，隔离性强且支持多实例并行，是现代浏览器首选方案。核心通过拦截对 window 的操作，确保子应用修改仅作用于代理对象，避免全局污染。 关
2025-09-01 17:56:36
149
转载 记录---前端实现倒计时为什么会存在误差呢
摘要： 前端倒计时存在误差主要因JavaScript单线程阻塞、浏览器节能模式及设备时间干扰。文章提出六大精准方案：1)动态修正的递归setTimeout；2)服务端时间校准；3)页面可见性监听；4)Web Worker多线程；5)performance.now()高精度API；6)CSS动画视觉分离。最佳实践建议复合策略，如短时用动态修正+高精度API，长时需服务端校准，并推荐误差监控与用户体验优化（如毫秒渲染）。核心解决思路是避开主线程阻塞，结合硬件加速与时间补偿机制。（150字）
2025-08-30 17:37:42
138
转载 记录---vue3打印解决方案：Vue-Plugin-HiPrint
摘要： Vue-Plugin-HiPrint是一个Vue.js插件，提供简单强大的打印功能。本文介绍其在Vue3中固定模板打印的使用方法。安装后需在main.js引入插件，并在index.html中添加打印样式文件。通过HiPrint引擎创建自定义模板（支持HTML/CSS），复制模板JSON数据到项目中使用。示例代码展示了如何加载模板、填充数据并触发打印。该插件支持高度定制化，适合Vue项目快速集成打印需求。 （150字）
2025-08-26 17:54:14
199
原创 鸿蒙应用开发---语音转文本
摘要： 本文介绍了如何使用华为HMS Core的语音识别功能将中文音频转换为文本。通过调用speechRecognizer模块，开发者可初始化引擎、设置回调监听器，并实现音频流写入或麦克风录音转文字功能。关键步骤包括创建SpeechRecognitionEngine实例、配置识别参数（如语言、音频格式）、处理识别结果回调，以及调用writeAudio或startListening方法启动识别。文末提供了完整代码案例，支持从音频文件或实时录音获取文本输出。 关键词： 语音识别、HMS Core、Harmony
2025-08-25 17:50:01
399
转载 记录---vue3项目实战 打印、导出PDF
商品标签打印模板摘要 该模板采用Vue+SCSS实现，主要功能包括： 网格布局：使用CSS Grid自动排列标签，每张50mm×30mm 四部分结构： 顶部价格区：渐变背景，突出显示现价和原价 商品信息区：名称限制20字符并支持省略号 条码区：动态生成商品条码 底部信息区：显示货架位置和库存 打印优化：去除阴影、避免分页截断、使用等宽字体 交互方法：内置价格格式化(保留两位小数)和文本截断功能 响应式设计：通过grid-auto-rows确保每行高度一致
2025-08-20 17:30:02
159
转载 记录---自动生成前端路由最佳实践
本文介绍了使用vite-plugin-pages插件自动生成前端路由的最佳实践。通过文件系统结构自动映射路由配置，支持动态路由、嵌套路由和自定义路由属性。文章详细说明了安装配置步骤、基本使用方法和高级配置选项，包括与Vue Router和React Router的集成方式，并提供了完整的项目结构示例和类型支持说明。该方法能显著减少手动维护路由的工作量，适用于Vite构建的现代前端项目。
2025-08-18 17:30:21
39
转载 记录---为什么你写的 `position: sticky` 不工作？99% 的前端都踩过这个坑
摘要： position: sticky 看似简单，实际开发中常因父元素设置 overflow、flex 布局冲突或未指定边界值而失效。其本质是元素在滚动到阈值前为 relative，之后转为 fixed 行为，但吸附范围仅限父容器区域。适用于表头吸顶、侧边导航等场景，搭配 scroll-margin 可优化锚点跳转体验。关键点包括：避免父级 overflow 限制、确保 flex 方向匹配、明确 top/left 等边界值。理解其"粘性边界"机制后，sticky 比 fixed 更灵活
2025-08-14 16:54:46
192
转载 记录---高效前端开发：使用 unplugin-auto-import 实现依赖自动导入
摘要： 本文介绍了如何利用 unplugin-auto-import 解决前端开发中重复导入模块的痛点问题。通过自动导入常用工具库（如 dayjs、lodash）、UI 组件（如 Element Plus）和自定义枚举，减少冗余代码并提升开发效率。文章详细说明了配置步骤，包括安装依赖、创建导出文件、Vite 配置和 TypeScript 集成，并与传统全局挂载方案进行对比，强调其类型安全、模块化等优势。该方案适用于 Vue/React 项目，能显著优化代码整洁度和开发体验。
2025-08-12 16:55:31
136
转载 记录---浏览器指纹-探究前端如何识别用户设备
摘要： 浏览器指纹是通过收集浏览器、设备、系统等特征信息生成的唯一标识，用于用户识别。相比Cookie，它无需存储数据，仅通过读取现有信息实现。常见的指纹方案包括Navigator指纹（浏览器版本、系统平台等）、Canvas指纹（利用图像渲染差异）、WebGL指纹（显卡驱动差异）等。本文提供了Navigator和Canvas指纹的代码示例，演示了如何通过JS采集设备信息并生成哈希值作为唯一指纹。Navigator指纹易受系统设置影响，而Canvas指纹基于硬件渲染差异，稳定性更高。这些技术可用于设备身份验证
2025-08-07 18:18:56
181
转载 记录---啊！！！Blob 居然这么强大！
在前端开发的世界里，我们每天都在和各种 API、对象和数据打交道。然而，有一个对象，常常被我们忽视，却又在背后默默支撑着许多关键功能 —— 它就是 Blob。Blob（Binary Large Object）听起来像是一个“冷门”对象，但实际上，它几乎无处不在：文件上传、下载、视频流、离线缓存、甚至 Service Worker 中的响应缓存……这些场景中，Blob 都在默默发挥着作用。今天，就让我们揭开 Blob 的神秘面纱，看看它到底有多强大。
2025-08-02 17:51:13
132
转载 记录---从零开始编写 useWindowSize Hook
本文介绍了如何逐步优化React中的useWindowSize Hook，从基础实现到高性能版本。初始版本直接监听窗口大小变化，但存在性能问题和SSR兼容性问题。通过添加SSR支持、引入依赖追踪优化渲染性能，最终使用React 18的useSyncExternalStore实现并发安全的高性能方案。每个优化步骤都解决了特定问题：服务端渲染兼容性、减少不必要的重新渲染、精确追踪组件实际使用的属性变化。此外还提供了完整的TypeScript类型支持，最终实现了一个既高效又可靠的响应式窗口尺寸Hook。
2025-07-28 17:11:16
61
转载 记录---npm link 详解：本地包开发与测试的利器
npm link 使用指南 npm link 是一个强大的本地开发工具，用于在本地包开发过程中创建符号链接，方便实时测试和调试。它通过将本地开发的包链接到全局 node_modules，再链接到测试项目，实现代码修改的即时同步。 核心功能： 创建符号链接实现本地包快速测试 支持全局和本地两种链接方式 适用于包开发、多项目协作和原型验证 使用步骤： 在包目录执行 npm link 创建全局链接 在测试项目执行 npm link <包名> 建立本地链接 开发完成后使用 npm unlink 解除链接
2025-07-24 17:39:11
417
转载 记录---说说PC端扫码登录
PC端扫码登录的高并发优化策略 本文详细分析了PC端扫码登录流程及高并发场景下的优化方案。标准流程包括二维码生成、移动端扫描、用户确认和凭证获取五个步骤。针对高并发场景，文章提出了四项优化措施：1）通过缓存和节流机制减轻二维码生成请求压力；2）采用指数退避策略或WebSocket减少状态轮询次数；3）利用Redis缓存和实时通知确保状态同步及时性；4）建立统一异常处理和完善重试机制。这些方案从性能优化、通信机制选择、异常处理等维度，有效提升了系统在高并发环境下的稳定性和用户体验。本文转载自掘金技术社区，为前
2025-07-18 17:48:45
87
转载 记录---写个vite插件自动处理系统权限，降低99%重复工作
这是一篇关于如何实现Vite插件自动生成按钮权限控制代码的技术文章。作者针对中台系统权限控制需求，提出通过Vite插件自动为按钮注入权限判断逻辑的解决方案。文章详细分析了实现过程中的6个关键问题：权限编码生成规则、多UI库按钮兼容、特殊按钮处理、Vite钩子选择、AST插入方案和参数传递方式。最终实现的插件能够自动为按钮添加权限指令，通过比对Pinia存储的权限列表控制按钮显示，显著减少了重复代码和维护成本。该方案采用AST处理确保稳定性，支持自定义权限编码规则，是前端权限控制的优雅实现方式。
2025-07-15 17:05:54
60
转载 记录---用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
**摘要：**本文介绍了一种使用iframe实现前端批量下载文件的优化方案。针对传统a标签下载方式存在的弹窗干扰和HTTPS资源拦截问题，通过动态创建隐藏iframe并设置协议无关URL，解决了批量下载的痛点。核心代码包括iframe创建、协议处理函数和自动清理机制，支持强制下载XML等文本文件。方案优势在于无弹窗、不影响页面布局、主线程流畅，适合需要批量静默下载的场景。（150字）
2025-07-14 17:43:14
81
转载 记录---在Vue项目中启用HTTPS本地开发
Vue项目配置HTTPS开发环境指南 本文详细讲解如何在Vue项目中搭建HTTPS本地开发环境：使用mkcert工具生成可信证书，配置vue.config.js启用HTTPS服务，解决跨域问题，并模拟真实生产环境。关键步骤包括：安装mkcert、生成域名证书、配置devServer的HTTPS选项、修改hosts文件，以及处理常见证书错误。通过该方案可获得浏览器信任的HTTPS连接、自定义域名环境、跨域API调用支持，特别适合需要测试PWA、第三方登录等场景的开发需求。文中还提供了自动化脚本、环境变量配置等
2025-07-05 17:24:30
171
转载 记录---grid实现瀑布流
摘要： 本文介绍了基于CSS Grid和Vue3的瀑布流布局实现方案。通过grid-auto-flow: dense属性和动态计算元素行数，实现等宽不等高的紧凑布局。核心步骤包括：1) 使用ResizeObserver监听元素高度变化；2) 动态计算网格行跨度；3) 结合触底加载和搜索功能。技术亮点：响应式列数适配、滚动监听优化、Vue3的TransitionGroup动画效果。代码提供了电影卡片展示的完整实现，涵盖数据获取、评分标签渲染和图片懒加载等功能。
2025-07-03 17:58:38
253
转载 记录---CSS Grid 布局：现代网页布局的强大工具
CSS Grid布局是一种强大的二维布局系统，提供了比传统方法更直观灵活的网页布局方式。文章介绍了Grid的基本概念，包括网格容器、网格项和网格线等术语，并展示了如何创建基本网格布局。核心特性如灵活的轨道大小、响应式设计和网格项定位被详细讲解，同时提供了命名网格线和区域的方法。文章还对比了Grid与Flexbox的适用场景，并探讨了浏览器兼容性问题。通过实际应用案例（如经典网页布局、图片画廊和产品卡片），展示了Grid布局的实用性和灵活性。
2025-07-01 17:22:45
139
原创 前端实现数字验证码
摘要： 本文介绍了一个基于Vue 3的图形验证码生成组件，通过Canvas实现4位随机数字验证码，包含动态背景色、旋转文字、干扰线和干扰点等防破解设计。核心使用useImageVerify Composition API管理验证码生命周期，支持双向数据绑定和点击刷新功能。代码通过随机函数确保验证码的不可预测性，并提供了灵活的样式调整参数。适用于登录/注册等需要简单人机验证的场景，组件可复用且扩展性强（如支持字母验证码）。文末附完整实现代码和调用示例。 （字数：150）
2025-06-05 18:42:16
412
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人