- 博客(96)
- 收藏
- 关注
RSS订阅原创 网页适配转换手写插件PX转换任何想转换的适配值，如果想加处理可直接在代码插件中修改
这篇文章介绍了两种实现CSS像素单位自适应转换的Vue插件方案： PostCSS插件方案： 在构建时通过PostCSS自动将px单位转换为vw 支持配置设计稿宽度、转换精度和忽略阈值 通过Vite配置集成到项目中 运行时插件方案： 通过Vue插件形式提供全局方法和指令 支持vw和rem两种自适应单位 监听窗口变化动态调整转换比例 提供$px2adaptive全局方法和v-adaptive指令 两种方案各有优势：PostCSS方案在构建时处理，性能更好；运行时方案更灵活，支持动态调整。开发者可根据项目需求选择
2025-08-20 18:05:36
72
原创 Vue3视频播放组件自定义封装、控制是否自动播放、全屏小屏控制、loading加载、静音播放等样式完全自定义控制，代码复制即用
Vue视频播放器组件摘要 该组件是一个功能丰富的视频播放器，支持以下特性： 核心功能 视频播放/暂停控制 进度条拖动与时间显示 音量调节与静音功能 全屏模式切换 自动播放设置 下一个视频播放功能 用户体验 视频封面显示 加载状态指示器 错误处理与提示 响应式设计，适应不同屏幕尺寸 控制栏自动隐藏功能 技术实现 基于Vue 3 Composition API开发 TypeScript支持 自定义图标通过Base64编码 丰富的视频事件监听（播放、暂停、结束等） 本地存储保存用户偏好设置 组件提供高度可定制性，
2025-08-05 17:51:10
241
原创 Vue3实现视频播放弹窗组件，支持全屏播放，音量控制，进度条自定义样式，适配浏览器小窗播放，视频大小自适配，缓冲loading，代码复制即用
视频播放组件技术摘要 该组件是一个基于Vue3的视频播放器，具有以下核心功能： 播放控制：支持播放/暂停、音量调节、全屏切换、进度跳转等基础功能 状态显示：包含加载状态指示、错误提示（支持多种错误类型识别）和播放进度显示 UI设计： 首帧封面显示（带模糊背景效果） 视频数据统计展示（点赞、评论、观看量） 响应式布局，支持全屏模式 自定义控制栏（进度条、时间显示等） 技术实现： 使用Element Plus的Dialog作为容器 通过Canvas获取视频首帧作为封面 内置多种错误处理机制 支持跨域视频资源处理
2025-07-24 16:36:23
412
原创 微信小程序 - 实现嵌套H5页面唤起微信支付的实现方案+完整流程源码，微信小程序webview(H5页面)调用微信小程序支付，嵌套h5页面怎么实现小程序支付（Vue2/3移动端H5网页、公众号网页等）
这篇文章详细介绍了在微信小程序中嵌套H5页面实现支付功能的完整解决方案。主要内容包括： 通过环境检测判断是否在小程序环境 H5与小程序的双向通信机制实现 完整的支付流程实现代码，包括前端、小程序端和后端 微信支付参数生成和签名验证方法 注意事项如域名配置、支付安全和兼容性处理 该方案采用了window.postMessage进行跨环境通信，后端生成支付签名确保安全，提供了从参数获取到支付完成的完整代码实现。
2025-07-21 08:43:04
465
2
原创 台式小风扇代码（除了没风其它什么都好）
这篇文章展示了一个交互式台式小风扇的网页实现。通过HTML、CSS和JavaScript构建了一个美观的模拟风扇界面，包含以下特点：精美UI设计 - 采用渐变色背景、圆角容器和SVG矢量图形绘制风扇（含底座、支架、扇叶和面罩）多档位控制 - 提供4个按钮控制风扇转速（关闭/1-3档）动画效果 - 使用requestAnimationFrame实现扇叶平滑旋转，不同档位对应不同转速幽默提示 - 页面显示"除了没有风，什么都好！"的趣味文字
2025-05-29 08:51:46
181
原创 手机网页，触底刷新和下拉刷新组件---vue3语法
本文实现了一个基于Vue3的无限滚动列表组件，具有以下核心功能：无限滚动加载：通过IntersectionObserver监听列表底部元素，实现滚动到底部自动加载更多数据下拉刷新：支持触屏下拉刷新操作，包含三种状态提示（下拉、释放、刷新中）状态管理：包含加载中、加载失败、无更多数据等多种状态显示响应式设计：适配移动端触屏操作，提供平滑的动画过渡效果API集成：通过props接收数据获取API，自动处理分页逻辑
2025-05-28 18:11:31
124
原创 实现网页鼠标点击后烟花发射扩散效果
添加配置参数来自定义烟花颜色、粒子数量等支持不同的触发事件（如双击、长按）添加不同的烟花效果（如链式烟花、连续发射）
2025-05-22 16:23:34
243
原创 2025上海前端面试遇到问题整理从小公司到大公司各种面试整理（高频题目出现）持续更新中
想在 2025 年前端面试中脱颖而出？别再盲目刷题啦！这里有超实用的“2025 前端高频面试题，亲身经历”分享。每一道题都源自真实面试场景，涵盖 React、Vue 框架应用、性能优化、Webpack 与 Vite 区别等核心要点。不仅能让你熟悉高频考点，更能从答题思路、技巧中掌握应对面试的方法。无论是初出茅庐的新手，还是想跳槽加薪的资深开发者，这份经验分享都能为你助力，让你在面试中自信满满，轻松斩获心仪 offer！
2025-04-23 10:16:05
1003
1
原创 （2025最新方案）微信内置浏览器调试工具免费教学Windows PC版微信内置浏览器调试
这个是edge浏览器，一般windows系统的电脑自带，如果电脑上已经有edge浏览器的，就可以不用安装这个了。上图中的127.0.0.1:62001 device 其实就是指的步骤三中打开的夜神模拟器，表示当前已经监听到了我们的夜神模拟器模拟出来的手机设备。在上一步中，如果你安装夜神模拟器的时候，选择的是自定义路径，那么就很容易找到夜神模拟器的安装路径。：这个是夜神模拟器的安装包，建议安装的时候安装在D盘（C盘除外的其他盘都可以）页面，在该页面就可以尽情调试了，大功告成。然后复制adb.exe所在的。
2025-01-08 15:45:55
1805
4
原创 通过交叉实现数据触底分页效果new IntersectionObserver（）（html、react、vue2、vue3）中使用
【代码】通过交叉实现数据触底分页效果new IntersectionObserver（）（html、react、vue2、vue3）中使用。
2024-12-27 13:41:23
558
原创 项目依赖拉不下来卡着不动怎么办，node又不支持cnpm
（Node Version Manager）来切换 Node 版本。：有时候，特定的 Node 版本可能会导致问题。这些步骤应有助于解决拉取依赖时的问题。，或反之，看看是否解决问题。按照步骤操作一版都能成功。
2024-09-06 18:51:43
618
原创 任务或者接口依次执行并返回结果使用pmq-ui案例
可以使用方法来按顺序查询多个门店的详情。假设门店接口是异步的，你可以将每个门店的查询封装成一个异步函数，并将这些函数作为参数传递给。下面我将展示一个简单的示例，假设门店接口是一个异步函数，它接收门店的ID作为参数，并返回一个包含门店详情的 Promise。
2024-08-05 17:53:39
365
原创 长期更新方法库推荐pmq-ui
v1.0.6 (2024-07-17): 新增methods/high-order-function.ts文件，实现方法browforChunk数据切片用于10000数据分片处理，根据浏览器机制实现的逻辑切片,提升用户体验。- v1.0.5 (2024-07-16): 新增methods/high-order-function.ts文件，实现方法browforChunk数据切片用于数据分片处理，根据浏览器机制实现的逻辑切片。- v1.0.0 (2024-07-10): 初始版本，实现基本的功能。
2024-07-23 11:09:52
618
1
原创 h5页面在微信浏览器页面不能返回问题处理，代码复制即用
【代码】h5页面在微信浏览器页面左滑不能返回问题处理，并处理安卓用户点击底部返回页面不能返回问题，代码复制即用。
2024-05-30 19:58:03
396
原创 高阶函数，前端切片处理提升用户体验，代码复制即用
【代码】高阶函数，前端切片处理渲染，页面卡顿、加载缓慢问题，废话啰嗦直接上代码提升用户体验，代码复制即用。
2024-04-12 16:35:05
186
原创 cover-view不能换行问题，简单粗暴把下面的代码加上去
word-break: break-all;word-wrap:break-word;white-space:pre-line;
2023-11-28 14:26:26
373
原创 上海开放大学计分作业四答案及题目（仅供参考，请勿耍小聪明）
一、听力理解。一、听力理解。1(10)Listen to the winners of the competition, Jan and Karin, discussing which hotel they’re going to stay at. Choose the correct answer.（请点击播放音频）1、（2.0分）2、（2.0分）3、（2.0分）4、（2.0分）5、（2.0分）答案：1.b2.c3.c4.b5.b二、语法。2(2分)
2023-04-15 16:49:20
11101
6
原创 上海开放大学大学英语计分作业三答案（仅供参考）
上海开放大学大学英语计分作业三答案（仅供参考）一、听力理解。一、听力理解。1(10)1、（2.0分）_____2、（2.0分）______A3、（2.0分）_____B4、（2.0分）_____B5、（2.0分）_____A二、语法。(因题目不一样，仅供参考)2(2分)I go ___B3(2分)B4(2分)B5(2分)A6(2分)A7(2分)You ___A8(2分)B9(2分)A10(2分)A11(2分)B三、词汇匹配。
2023-04-13 17:02:40
11834
原创 上海开放大学大学英语计分作业二答案
（3.0分）Double Take。（3.0分）Double Take。（3.0分）Year Zero。上海开放大学大学英语计分作业二答案Are the two people friends?We had a great time last weekend. We decided to camp on Mount Olympus. You know, the mountain with flames that burn in the rock? It was really good!We travel
2023-04-12 16:08:10
9559
1
原创 上海开放大学大学英语计分作业一题目及答案
上海开放大学计分作业一答案Listen to five people paying the bill and choose the correct price.（请点击播放音频）1、（2.0分）2、（2.0分）3、（2.0分）4、（2.0分）5、（2.0分）答案：1.b2.a3.a4.a5.b词汇匹配：1、actor3、waiter5、dentist6、theatre7、armchair9、terraceA 、秘书B 、牙医C 、演员D 、记者E 、服务员F 、露台。
2023-04-08 18:26:19
11055
1
原创 redis使用本地连接127.0.0.1失败总结
首先我们没有线上服务器或者集群，所以要使用工具提前部署一下本机redis连接下载redis：百度网盘下载pwd=wf2h提取码：wf2h使用教程：把这个下载下来解压就可以了，如图所示ok我们第一步来配置本地服务。
2023-03-28 15:32:22
1005
原创 小程序跳转使用JSON.stringify和JSON.parse转换问题Unexpected token % in JSON at position 0
问题原因就是里面有特殊符号。来来来直接上解决方案。小程序跳转使用JSON.stringify和JSON.parse转换问题Unexpected token % in JSON at position 0
2023-03-23 12:05:24
491
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人